当前位置：首页 > CMS教程 > Thinkphp > 列表

Thinkphp5框架ajax接口实现方法分析

发布:smiling　来源: PHP粉丝网 　添加日期：2021-12-13 14:11:01　浏览: 评论：0　

本文实例讲述了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. <head> 
  4.   <meta charset="UTF-8"> 
  5.   <title>ajax调用接口</title> 
  6. </head> 
  7. <body> 
  8.   11111 
  9.   <div id="test"> 
  10.   </div> 
  11.   <script type="text/javascript"> 
  12.   var oAjax = new XMLHttpRequest(); 
  13.   oAjax.open('GET',"/thinkphp/public/index.php/index/index/apiapi?name=1"); 
  14.   oAjax.onreadystatechange = function() { 
  15.     if (oAjax.readyState == 4) { 
  16.       if (oAjax.status >= 200 && oAjax.status < 300 || oAjax.status == 304) { 
  17.         console.log(oAjax.responseText); 
  18.         var data=JSON.parse(oAjax.responseText); 
  19.         document.getElementById("test").innerHTML=data.sex; 
  20.       } else { 
  21.         console.log(oAjax.status); 
  22.       } 
  23.     } 
  24.   }; 
  25.   oAjax.send(); 
  26.   </script> 
  27. </body> 
  28. </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.    public function apiapi(){ 
  8.     $name=$this->request->param(); 
  9.     return json_encode($name); 
  10.     ///return "common"; 
  11.   } 
  12.    public function api(){ 
  13.     return view(); 
  14.     ///return "common"; 
  15.   } 
  16. } 

代码首先获取ajax获取的参数，之后返回到前端。

Tags: Thinkphp5接口 ajax接口

分享到：

推荐文章

热门文章

最新评论文章