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获取的参数,之后返回到前端。

本文结束。