thinkphp5如何使用ajax(变化的核心,也就是ajax作用的核心是什么)
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获取的参数,之后返回到前端。
本文结束。
转载于:https://www.cnblogs.com/Renyi-Fan/p/9184377.html
thinkphp5如何使用ajax(变化的核心,也就是ajax作用的核心是什么)相关推荐
- ajax最核心的技术,Ajax技术的核心以及方法属性
这次给大家带来Ajax技术的核心以及方法属性,使用Ajax技术核心以及方法属性的注意事项有哪些,下面就是实战案例,一起来看一下. 一.什么是Ajax Ajax英文全称为" Asynchr J ...
- Ajax学习总结(1)——Ajax实例讲解与技术原理
摘要:AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术.AJAX 是一种用 ...
- html ajax请求怎么用,如何使用ajax,ajax请求的五个步骤
有很多童鞋,在WEB前端面试的时候,常会被Ajax问题难住,其实Ajax没有你们理解的那么难,现在源码时代H5学科讲师带着大家重新来回顾一下知识点:随便再给大家普及一下小常识,今天咱们聊的就是怎么快速 ...
- ajax提交相对路径报错,ajax提交请求为啥url要用这个函数encodeURI
参考如下: 如果你是通过form提交的,那就不需要用这个了.但是如果是你使用url的方式 例如:ajax提交到后台的,就需要对url进行encodeURI编码, 否则,会导致后台出现各种乱码,不加en ...
- ASP.NET AJAX文档-ASP.NET AJAX 概述[翻译](1)
本文翻译自官方文档,小弟是第一次翻译,若有不妥之处,请大家指出. ASP.NET AJAX 概述 介绍 微软的ASP.NET AJAX能让你快速的创建web页面,这些页面包括一个能快速响应的富用户体验 ...
- wcf简单教程(10) ajax调用,wcf简单教程(10) ajax调用
wcf简单教程(10) ajax调用 [2021-02-11 16:23:59] 简介: php去除nbsp的方法:首先创建一个PHP代码示例文件:然后通过"preg_replace(&q ...
- 一、AJAX学习笔记——原生AJAX (ajax简介、XML简介、ajax优缺点、ajax的使用)
第 1 章:原生 AJAX 1.1 AJAX 简介 AJAX 全称为 Asynchronous JavaScript And XML,就是异步的 JS 和 XML. 通过 AJAX 可以在浏览器中向服 ...
- react 流程图框架_【赠书】Preact(React)核心原理详解Preact(React) 核心原理解析...
豆皮粉儿们,又见面了,今天这一期,由字节跳动数据平台的"winge(宝丁)",带大家见识见识前端"轮子"之一Preact框架. 提到Preact,你肯定会先想到 ...
- ajax 服务端 除了echo,Ajax轮询——定时的通过Ajax查询服务端
概念:轮询(polling):客户端按规定时间定时向服务端发送ajax请求,服务器接到请求后马上返回响应信息并关闭连接. test.html //前端代码 var getting = { ur ...
最新文章
- CPU 的一些基本知识总结
- Android手机开机自动启动
- CSP认证201409-4	最优配餐[C++题解]:bfs、多源bfs、最短路、图论
- js经典试题之数据类型
- 你对JVM三色标记的理解嘛?
- jquery 自动触发事件 trigger
- 服务器上运行arp,服务器ARP病毒的特征及防护说明
- Z-BlogPHP主题/名扬图文博客主题模板商业版
- 超好用的网页浮动广告代码
- linux中安装微信开发者工具
- hurst代码 python_python中的Hurst指数
- Revel框架快速入门教程
- 拉丁超立方体抽样方法学习笔记
- excel 公式标多级目录序号
- SEO优化与SEM(竞价)区别在哪?
- 量子计算新突破:为奇异分数量子态与超导耦合提供机会
- Studing Day4 - python基础4
- 备受瞩目的“2017全球云计算大会”有哪些亮点值得关注?
- 郑州大学计算机系王院长,郑州大学徐明亮教授、北京航天航空大学牛建伟教授来校开展学术交流...
- 必会工具之(一)Source Insight篇
热门文章
- android 获取元素的下标_Appium中定位方式by_android_uiautomator
- sql distinct多个字段_数据分析|记一“道”难忘的SQL面试题...
- 绵阳python培训_《绵》原文及翻译海绵翻译
- kmeans 算法_kmeans优化算法:二分Kmeans聚类算法
- python如何定义类_python类定义的讲解
- Sql Server中实现Mysql中的group_concat函数效果
- [Linux] 020 RPM 包的命名原则与其依赖性
- VS2010/MFC编程入门之二十(常用控件:静态文本框)
- WPF中的Pack URI
- hdoj - 1258 Sum It Up hdoj - 1016 Prime Ring Problem (简单dfs)