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));
})