AJAX接收JSON数据，调用template模板循环渲染页面的小白新手方法

请求回来的数据为JSON，有两种方式实现：
第一种：在后台接口规定吐出JSON数据：写header，将键值对数组进行json编码；
第二种：后台接口吐出JSON格式的字符串，接收端定义数据格式dataType。

第一种：在后台接口规定吐出JSON数据

需求1 后台接口吐出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));
})

2018.1.3

最后编辑于：2018.01.03 21:38:15