编辑整理:整理来源:悟空问答,浏览量:54,时间:2023-03-20 05:15:01
用法一、静态页面下调用动态页面内容
例如在某个静态html页面中想调用动态内容时,可以将下面代码放到它页面里:
<div id="ajax_test_file"> {dr_ajax_template("ajax_test_file", "test.html")}
意思是调用test.html的内容,作为动态调用模式,那么你需要在test.html写你的代码。
例如
Ajax动态调用模板通常用于调用会员登录信息,比如在静态页面或者首页中调用会员登录状态信息等。
第一步、在首页或静态页面加上下面代码:
<ul id="dr_member_info"> </ul> <!-- 动态调用member.html模板的会员登录信息 --> {dr_ajax_template('dr_member_info', 'member.html')}
id值一定要和后面的函数第一个参数保持一致,第二个参数表示调用哪个模板,例子是member.html
第二步、创建api/member.html模板
{if $member} <li><a href="{MEMBER_URL}">用户中心</a><i class="fa fa-angle-down"></i></li> <li><a href="javascript:dr_loginout('退出成功');">退出平台</a></li> {else} <li><a href="{dr_member_url('login/index')}">登录</a></li> <li><a href="{dr_member_url('register/index')}">注册</a></li> {/if}
特别说明:使用本函数时必须在它的前面加载jquery
----传递参数的写法---
{dr_ajax_template('dr_member_info', 'member.html', 'cc=123&bb=321')}
api/member.html模板接收参数写法是:
{$cc} {$bb}
用法二、ajax动态加载模式,例如搜索页面无刷新滚动加载下一页
<script src="需要百度搜索找到这个js库 dropload.min.js"></script> <input id="dr_page_id" type="hidden" value="2"> <script> $(function(){ // dropload var dropload = $('.content').dropload({ scrollArea : window, loadDownFn : function(me){ $.ajax({ type: 'GET', url: '/index.php?s=api&c=api&m=template&name=items.html&module={MOD_DIR}&catid={$catid}&sototal={$sototal}&searchid={$searchid}&order={$params.order}&page='+$('#dr_page_id').val(), dataType: 'jsonp', success: function(json){ $('.sd-item-list').appd(json.msg); // 每次数据加载完,必须重置 me.resetload(); $('#dr_page_id').val(Number($('#dr_page_id').val())+1); }, error: function(xhr, type){ alert('Ajax error!'); // 即使加载出错,也得重置 me.resetload(); } }); } }); }); </script>
然后在api/items.html写上第二页的查询代码
<?php $get=$_GET;?> {search module=$get.module id=$get.searchid total=$get.sototal order=$get.order catid=$get.catid page=1 pagesize=20 urlrule=$urlrule} <li> <a href="{dr_mobile_url($t.url)}"> <div class="sd-item-img"><img src="{dr_thumb($t[thumb][0][file], 100, 100)}"></div> <div class="sd-item-body"> <div class="sd-item-body-name"> <span>{$t.title}</span> </div> <div class="product-price-m"> <em>¥ <span class="big-price">{number_format($t.price, 2)}</span> </em> <i class="plus-p"></i> </div> <div class="gray-pro-info"> <span>{$t.comments}条评价</span> <span>{$t.volume}销量</span> </div> </div> </a> </li> {/search}
用法二的扩展:通过API请求,可返回指定变量
需要在api/items.html模板中定义返回变量:
在api/items.html任意位置写上: {php $this->call_value['变量1'] = "变量11的值";}
那么通过api请求会返回:
{ "code":1, "msg":"xxx", "data": {"file":"xxx.html","module":"", "call_value":{"变量1":"变量11的值" } } }