前一篇讲到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.  
  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 == ) {
  19. if (oAjax.status >= && oAjax.status < || oAjax.status == ) {
  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获取的参数,之后返回到前端。

本文结束。

Thinkphp5的ajax接口实现的更多相关文章

  1. 性能测试培训:Ajax接口级性能测试之jmeter版

    性能测试培训:Ajax接口级性能测试之jmeter版   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.在poptest认为工具 ...

  2. 使用PHP写ajax接口

    使用PHP写ajax接口 之前有学过php都是前后端没有分离的,所以也想去了解后端是怎么写出ajax接口的,可能问了别人或者上网找了很多资料都很有有点懵,或者说直接用TP或者lavarel这些后端框架 ...

  3. 微信小程序request(ajax)接口请求封装

    微信小程序request(ajax)接口请求封装 最近在进行小程序的编写,需要调用后端接口,经常要用到wx.request方法,所以就自己封装了一下,简化一下代码,如果能给大家提供帮助更好,在封装的时 ...

  4. thinkphp后端开发ajax接口开发测试(2)

    非常好用的Postman,Google chrome上必备测试ajax接口插件:

  5. AJAX接口-拉购网职位搜索爬虫

    拉购网职位搜索爬虫 分析职位搜索调用接口: 浏览器开发者模式(快捷键F12)切换手机模式,打开拉购网职位搜索链接 https://m.lagou.com/search.html 输入搜索关键词, 例如 ...

  6. 优雅地解决Ajax接口参数来自另一个接口的问题

    最近闲赋在家,终于有时间回顾我在工作中遇到的一些东西,由于经验不足,有些方面做的不是很好.在上家公司曾经遇到一个小问题,就是Ajax的接口中有参数是从另一个接口后台传来的.当时我的做法是将需要参数的接 ...

  7. thinkphp5开发restful-api接口学习 笔记二

    目录 第4节 为api项目搭建数据库 第5节 使用markdown书写接口文档 第6节(判断数据库中是否有此用户) 第7节 为项目配置URL 需求分析 配置主域名和二级域名 使用tp5路由进行URL解 ...

  8. Thinkphp5之ajax分页实现_paginate()参数详细

    Thinkphp5 做数据搜索需要带关键词分页,如何将查询条件带入到分页中,本文详细介绍Thinkphp5 分页带参数 一.基本使用方法: $list = Db::name('user')->w ...

  9. node.js爬取ajax接口数据

    爬取页面数据与爬取接口数据,我还是觉得爬取接口数据更加简单一点,主要爬取一些分页的数据. 爬取步骤: 1.明确目标接口地址,举个例子 : https://www.vcg.com/api/common/ ...

随机推荐

  1. 二维离散余弦变换(2D-DCT)

    图像处理中常用的正交变换除了傅里叶变换以外,还有一些其它常用的正交变换,其中离散余弦变换DCT就是一种,这是JPEG图像压缩算法里的核心算法,这里我们也主要讲解JPEG压缩算法里所使用8*8矩阵的二维 ...

  2. 北京Uber优步司机奖励政策(1月24日)

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  3. UItraIso 制作ubentu 系统失败

    设备忙,请退出所有正在运行的应用程序,按确定按钮重试. 解决方法: 不要使用UItraIso,不知道为什么一直不行.重启了电脑几次都不行.用Rufus吧 https://rufus.ie/ 注意: r ...

  4. ROS Twist和Odometry消息类型使用(Python)

    消息类型: 1. Twist - 线速度角速度 通常被用于发送到/cmd_vel话题,被base controller节点监听,控制机器人运动 geometry_msgs/Twist geometry ...

  5. 怎样通过Qt编写C/C++代码查询当前Linux的版本号?

    遇到一个问题:如题. 我的开发环境是:嵌入式ARM + Linux系统 + Qt 4.5 + C/C++ 现在需要查询 当前Linux系统的版本号. 问题: 1)Qt 4.5 提供怎样的API来获取? ...

  6. Linux命令应用大词典-第24章 任务计划

    24.1 contab:针对个人用户维护crontab文件

  7. lesson 15 Fifty pence worth of trouble

    lesson 15 Fifty pence worth of trouble appreciate =be grateful for We really appreciate all the help ...

  8. 前端开发工程师 - 05.产品前端架构 - 协作流程 & 接口设计 & 版本管理 & 技术选型 &开发实践

    05.产品前端架构 第1章--协作流程 WEB系统 角色定义 协作流程 职责说明 第2章--接口设计 概述 接口规范 规范应用 本地开发 第3章--版本管理 见 Java开发工程师(Web方向) - ...

  9. 01背包问题:DP

    题目描述: 有 N 件物品和一个容量是 V 的背包.每件物品只能使用一次. 第 i 件物品的体积是 vi,价值是 wi. 求解将哪些物品装入背包,可使这些物品的总体积不超过背包容量,且总价值最大.输出 ...

  10. LeetCode 108——将有序数组转化为二叉搜索树

    1. 题目 2. 解答 一棵高度平衡的二叉搜索树意味着根节点的左右子树包含相同数量的节点,也就是根节点为有序数组的中值. 因此,我们将数组的中值作为根节点,然后再递归分别得到左半部分数据转化的左子树和 ...