本帖最后由 逆风天 于 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 。