Thinkphp5的ajax接口實現

下面介紹具體的ajax接口實現代碼。

首先是html代碼部分,如訪問地址爲:http://www.domain.com/thinkphp/public/index.php/index/index/api,這裏沒有省略入口文件,同時本地的域名是www.domain.com,tp5框架在thinkphp文件裏面。這裏採用原生ajax,沒有做ie瀏覽器的兼容性,代碼如下

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>ajax調用接口</title>
</head>

<body>
    11111
    <div id="test">
        
    </div>
    <script type="text/javascript">
    var oAjax = new XMLHttpRequest();
    oAjax.open('GET',"/thinkphp/public/index.php/index/index/apiapi?name=1");
    oAjax.onreadystatechange = function() {
        if (oAjax.readyState == 4) {
            if (oAjax.status >= 200 && oAjax.status < 300 || oAjax.status == 304) {
               console.log(oAjax.responseText);
               var data=JSON.parse(oAjax.responseText);
               document.getElementById("test").innerHTML=data.sex;
            } else {
                console.log(oAjax.status);
            }
        }
    };
    oAjax.send();
    </script>
</body>

</html>



對上述代碼做一下解釋,算是一個小知識點:一般來說可以將http狀態代碼爲200作爲成功的標誌,此時responseText的屬性的內容已經就緒。此外狀態304表示請求的資源並沒有被修改,可以直接使用瀏覽器中緩存的版本。

至於爲啥是大於200是出於兼容性的考慮,有的瀏覽器會報告204。

後端代碼如下,後端代碼是同一個模塊index下的同一個控制器下index的apiapi方法。

<?php
namespace app\index\controller;
//use think\Db;
use think\Controller;
class Index extends Controller
{

     public function apiapi(){
        $name=$this->request->param();
        return json_encode($name);
        ///return "common";
    }
   
     public function api(){
       
        return view();
        ///return "common";
    }
}


代碼首先獲取ajax獲取的參數,之後返回到前端。

本文結束。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章