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