前一篇講到thinkphp5從數據庫獲取數據之后賦給視圖view，前一篇從數據渲染方式來說是服務端數據渲染，這一章則是瀏覽器端數據渲染。按照知識總結依據來划分，這是兩種不同的技術場景。
下面介紹具體的ajax接口實現代碼。
首先是html代碼部分，我的訪問地址為：http://app.write.com/thinkphp/public/index.php/index/index/api，這里沒有省略入口文件，同時我本地的域名是app.write.com，tp5框架在thinkphp文件里面。這里采用原生ajax，沒有做ie瀏覽器的兼容性，代碼如下
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>ajax調用接口</title> 7 </head> 8 9 <body> 10 11111 11 <div id="test"> 12 13 </div> 14 <script type="text/javascript"> 15 var oAjax = new XMLHttpRequest(); 16 oAjax.open('GET',"/thinkphp/public/index.php/index/index/apiapi?name=1"); 17 oAjax.onreadystatechange = function() { 18 if (oAjax.readyState == 4) { 19 if (oAjax.status >= 200 && oAjax.status < 300 || oAjax.status == 304) { 20 console.log(oAjax.responseText); 21 var data=JSON.parse(oAjax.responseText); 22 document.getElementById("test").innerHTML=data.sex; 23 } else { 24 console.log(oAjax.status); 25 } 26 } 27 }; 28 oAjax.send(); 29 </script> 30 </body> 31 32 </html>
對上述代碼做一下解釋，算是一個小知識點：一般來說可以將http狀態代碼為200作為成功的標志，此時responseText的屬性的內容已經就緒。此外狀態304表示請求的資源並沒有被修改，可以直接使用瀏覽器中緩存的版本。
至於為啥是大於200是出於兼容性的考慮，有的瀏覽器會報告204。
后端代碼如下，后端代碼是同一個模塊index下的同一個控制器下index的apiapi方法。
1 <?php 2 namespace app\index\controller; 3 //use think\Db; 4 use think\Controller; 5 class Index extends Controller 6 { 7 8 public function apiapi(){ 9 $name=$this->request->param(); 10 return json_encode($name); 11 ///return "common"; 12 } 13 14 public function api(){ 15 16 return view(); 17 ///return "common"; 18 } 19 }
代碼首先獲取ajax獲取的參數，之后返回到前端。
本文結束。