Thinkphp5框架ajax接口实现方法分析
时间:2019-08-28
本文章向大家介绍Thinkphp5框架ajax接口实现方法分析,主要包括Thinkphp5框架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浏览器的兼容性,代码如下
<!DOCTYPE html> <html lang="en"> <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获取的参数,之后返回到前端。
更多关于thinkPHP相关内容感兴趣的读者可查看本站专题:《ThinkPHP入门教程》、《thinkPHP模板操作技巧总结》、《ThinkPHP常用方法总结》、《codeigniter入门教程》、《CI(CodeIgniter)框架进阶教程》、《Zend FrameWork框架入门教程》及《PHP模板技术总结》。
希望本文所述对大家基于ThinkPHP框架的PHP程序设计有所帮助。
- 逆向工厂(一):从hello world开始
- Android系统到底安不安全?细数Android7.0 Nougat的几大安全增强功能
- 冒用数字签名的对抗:亟需加强的签名审核
- Twitter开源云环境时间序列数据断层检测工具BreakoutDetection
- 用Python的长短期记忆神经网络进行时间序列预测
- 【问底】许鹏:使用Spark+Cassandra打造高性能数据分析平台(一)
- 隐秘通讯与跳板?C&C服务器究竟是怎么一回事
- 灵活布置、可二次开发的乌云公开漏洞及知识库搜索
- 干货 | 2014年我国大数据发展分析报告
- 这个恶意软件“奇葩”的反虚拟机技巧
- Android漏洞CVE-2015-3825分析及exploit实战:从Crash到劫持PC
- VaultPasswordView:可用于查看windows Vault密码的工具
- 逆向工厂(二):静态分析技术
- 打开文件夹就运行?COM劫持利用新姿势
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法