前端动态调用模板

用法一、静态页面下调用动态页面内容

例如在某个静态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

----传递参数的写法---

方法1：将固定参数传入到动态模板

{dr_ajax_template('dr_member_info', 'member.html', 'cc=123&bb=321')}

api/member.html模板接收参数写法是：

{$cc}

{$bb}

方法2：将变量参数传入到动态模板，例如show.html内容页将内容id传入进去

{dr_ajax_template('dr_member_info', 'member.html', 'id='.$id)}

{dr_ajax_template('dr_member_info', 'member.html', 'title='.$title.'&id='.$id)} 将内容标题和id一起传入

api/member.html模板接收参数写法是：

{$id}

{$title} 接收第二个参数

用法二、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').append(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的值"  }   }

}