逆风天 发表于 2023-6-30 18:09:55

Discuz Ajax 无刷新加载范例

本帖最后由 逆风天 于 2023-6-30 18:33 编辑

实现目标:点击一个链接,不跳转,在制定容器中加载!
首先看官方文档中的说明
ajaxget(url, showid, waitid, loading, display, recall)
url
      请求的 url
showid
      ajax 返回信息显示区域的 id
waitid
      ajax 请求过程中显示等待信息区域的 id
loading
      ajax 请求过程中显示的等待信息
display
      'none'      不显示
      ''      显示
      'auto'      自动
recall
      回执函数 ajax 请求完成并返回信息后执行 可以是一个函数(推荐)也可以是一段 js 代码
1、添加链接
<a href="{$_G['basescript']}.php?show=all" onclick="ajaxget(this.href, 'AjaxEchoBox', 'LoadingBox');doane(event);" class="list-item link-view">点我加载</a>
2、加载效果和容器
{if !$_G['inajax']}
<div class="loading-box" id="LoadingBox" style="display:none">
          <div class="spinner-border"></div>
          <span>加载中...</span>
</div>
<div class="card-list view-list" id="AjaxEchoBox">
{/if}

          {if $_G['inajax']}
          这里可以放置一些数据输出什么的,比如loop循环之类的,或者一些判断,链接的href可以传值,这里可以接收。
          {/if}

{if !$_G['inajax']}
</div>
{/if}需要注意的是 !$_G['inajax'] 这个是必须要存在的,用于区别ajax内容,如果不添加,ajax执行的时候会把外部的容器全部加载到 #AjaxEchoBox 。





页: [1]
查看完整版本: Discuz Ajax 无刷新加载范例