thinkphp5如何使用ajax(變化的核心,也就是ajax作用的核心是什么)
一、總結
一句話總結:ajax的核心在於頁面的不刷新而獲取后台數據,所以后台的操作還是一樣(獲取參數,返回數據),只是前台是以ajax傳遞數據而已。
1、thinkphp5如何使用ajax?
在頁面用ajax把數據傳過來,在后台獲取參數,然后返回想要返回的數據即可。
2、thinkphp中ajax請求方式特點?
傳遞過來的參數鍵前加了下划線_
http://localhost/index?_ajax=1
二、thinkphp5 ajax問題
thinkphp5不支持ajax么?3.2.3都有ajaxReturn()方法,5.0就沒有了?還是改成什么方式了?在thinkphp5怎么用ajax?
return json($arr);
Tp5的ajax是自動識別的
我也是第一次用,看了下文檔,已經改了,
可以直接在控制器里面用json($arrData)即可
三、參考手冊
AJAX/PJAX
偽裝
可以對請求進行AJAX
請求偽裝,如下:
http://localhost/index?_ajax=1
或者PJAX
請求偽裝
http://localhost/index?_pjax=1
如果你需要改變偽裝請求的變量名,可以修改應用配置文件:
// 表單ajax偽裝變量 'var_ajax' => '_a', // 表單pjax偽裝變量 'var_pjax' => '_p',
_ajax
和_pjax
可以通過GET/POST/PUT
等請求變量偽裝。
控制器一般不需要任何輸出,直接return即可。
輸出轉換
默認情況下,控制器的返回輸出不會做任何的數據處理,但可以設置輸出格式,並進行自動的數據轉換處理,前提是控制器的輸出數據必須采用return
的方式返回。
如果控制器定義為:
namespace app\index\controller; class Index { public function hello() { return 'hello,world!'; } public function data() { return ['name'=>'thinkphp','status'=>1]; } }
當我們設置輸出數據格式為JSON:
// 默認輸出類型 'default_return_type' => 'json',
我們訪問
http://localhost/index.php/index/Index/hello http://localhost/index.php/index/Index/data
輸出的結果變成:
"hello,world!" {"name":"thinkphp","status":1}
默認情況下,控制器在ajax請求會對返回類型自動轉換,默認為json
如果我們控制器定義
namespace app\index\controller; class Index { public function data() { return ['name'=>'thinkphp','status'=>1]; } }
我們訪問
http://localhost/index.php/index/Index/data
輸出的結果變成:
{"name":"thinkphp","status":1}
當我們設置輸出數據格式為html:
// 默認輸出類型 'default_ajax_return' => 'html',
這種情況下ajax請求不會對返回內容進行轉換
error方法會自動判斷當前請求是否屬於Ajax
請求,如果屬於Ajax
請求則會自動轉換為default_ajax_return
配置的格式返回信息。 success在Ajax
請求下不返回信息,需要開發者自行處理。
四、thinkphp5使用ajax
前一篇講到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獲取的參數,之后返回到前端。
本文結束。