Ajax接收Json数据，调用template模板循环渲染页面的方法

一、 后台接口吐出JSON数据

后台php接口中，需要写三个部分：
1.1 开头header规定数据格式；

header("content-type:application/json;charset=utf-8");

1.2 查询完数据后编写键值对数组；

$theData1 = selectblabla;
$theData2 = selectblabla;
$dataArray= Array(
    "theData1" => $theData1,
    "theData2" => $theData2
);

1.3 结尾输出json_encode。

echo json_encode($dataArray);

---

2 建立Template循环模板

2.1 在HTML中引入Template插件js；

<script src="../assets/vendors/art-template/template-web.js"></script> 

2.2 在页面内嵌或外联js中写入template模板；

<script type="text/html" id="模板id"> //循环开头结尾用each包起来，开头标明引入的JSON数据源 //如：案例中数据源为backData中的theData2 {{each theData2}} <tr> //从JSON中需取的值，用$value把键点出来 <td>{{$value.keyA}}</td> <td>{{$value.keyB}}</td> <td>{{$value.keyC}}</td> </tr> {{/each}} </script> 

3 Ajax请求数据，调用template渲染内容

3.1 在AJex请求中，sucess函数中，调用template()函数

$.get({
url: '../_api/getDate.php',
success: function(backData){ //直接将tbody中的内容html替换为模板循环渲染的内容 $("tbody").html(template("模板id",backData)); }) 

---

注意：注册事件函数

模板渲染出来的页面元素均为动态生成的，如需注册事件函数，不能直接将click等事件注册在元素上。
而是on在页面的静态父级元素，再写注册事件函数。
例如：<tr>及里面的内容是动态生成的，需给<tr>中的<a>注册点击事件

   //on在table上，注册click事件，触发元素为table中的a
$("table").on("click", "a" ,function(){ 函数体; }) 

---

二、后台接口吐出JSON格式的字符串

1 后台接口吐出JSON格式字符串

echo '{
    "theKeyA" : "blablabla",
    "theKeyB" : "okeyokey"
    //… …
}';

2 建立Template循环模板

<script type="text/html" id="模板id"> //循环开头结尾用each包起来，开头标明引入的JSON数据源 //如：案例中数据源为theData1 {{each theData1}} <tr> //从JSON中需取的值，用$value把键点出来 <td>{{$value.theKeyA}}</td> <td>{{$value.theKeyB}}</td> </tr> {{/each}} </script> 

3 Ajax请求数据，规定JSON格式，调用template渲染内容

3.1 在AJex请求中，定义sucess函数中，调用template()函数

$.get({
url: '../_api/getDate.php',
dataType:'json', success: function(backData){ //直接将tbody中的内容html替换为模板循环渲染的内容 $("tbody").html(template("模板id",backData)); })

转载于:https://www.cnblogs.com/angel648/p/11116621.html