ThinkPHP 中使用 IS_AJAX 判断原生 JS 中的 Ajax 出现问题
问题:
在 ThinkPHP 中使用原生 js 发起 Ajax 请求的时候、在控制器无法使用 IS_AJAX 进行判断。而使用 jQuery 中的 ajax 是没有问题的。
在ThinkPHP中、有一个判断是 ajax 请求的常量 IS_AJAX;
Ajax 请求常用的有两种情况:一种是原生 js 的 ajax 请求、一种是 jQuery 的 ajax 请求。
分析:
先看看使用 jQuery 中使用 ajax 发送请求的时候的头信息:
Accept: application/json, text/javascript, */*; q=0.01
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9
Connection: keep-alive
Content-Length: 22
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Cookie: PHPSESSID=ns9mjve234erh0qerlcl180v52
Host: localhost
Origin: http://localhost
Referer: http://localhost/ok/
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/547.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/547.36
X-Requested-With: XMLHttpRequest
再看看使用 JS 中的原生 ajax 发送请求的时候的头信息:
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9
Connection: keep-alive
Cookie: PHPSESSID=ns9mjve234erh0qerlcl180v52
Host: localhost
Referer: http://localhost/tp/
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/547.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/547.36
再查看在TP是如何定义的常量 IS_AJAX:
在 tp3.2.3 版本中
\ThinkPHP\Library\Think\App.class.php (Line:49)
define('IS_AJAX', ((isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') || !empty($_POST[C('VAR_AJAX_SUBMIT')]) || !empty($_GET[C('VAR_AJAX_SUBMIT')])) ? true : false);
你会发现如下:
使用 jquery 发送 ajax 请求的时候、比使用原生 js 中的 ajax 多一个请求头 X-Requested-With: XMLHttpRequest。
而且 ThinkPHP 就是利用判读是否存在请求头这种原理去定义常量 IS_AJAX 的。
那怎么解决这个问题呢?
在发送ajax请求的时候设置一个对应的请求头信息。
function page( page )
{
var ajax = new XMLHttpRequest()
ajax.open( 'get', '__URL__/show?page='+page, true )
ajax.setRequestHeader("X-Requested-With", "XMLHttpRequest");
ajax.send()
ajax.onreadystatechange = function ()
{
if ( ajax.readyState == 4 && ajax.status == 200 )
{
document.getElementById( 'box' ).innerHTML = ajax.responseText;
}
}
}
设置完之后、再次看请求头信息、与之前的对比、多了一条
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9
Connection: keep-alive
Cookie: PHPSESSID=ns9mjve234erh0qerlcl180v52
Host: localhost
Referer: http://localhost/tp/index.php/Home/Index/show
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/547.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/547.36
X-Requested-With: XMLHttpRequest
如此问题便解决了。
ThinkPHP 中使用 IS_AJAX 判断原生 JS 中的 Ajax 出现问题的更多相关文章
- 原生JS中apply()方法的一个值得注意的用法
今天在学习vue.js的render时,遇到需要重复构造多个同类型对象的问题,在这里发现原生JS中apply()方法的一个特殊的用法: var ary = Array.apply(null, { &q ...
- 原生js中slice()方法和splice()区别
slice()方法和splice()方法都是原生js中对数组操作的方法. slice(),返回一个新的数组,该方法可从已有的数组中返回选定的元素.例如:arrObject(start,end),sta ...
- 【温故知新】——原生js中常用的四种循环方式
一.引言 本文主要是利用一个例子,讲一下原生js中常用的四种循环方式的使用与区别: 实现效果: 在网页中弹出框输入0 网页输出“欢迎下次光临” 在网页中弹出框输入1 网页输出“查询中……” 在 ...
- 关于原生js中函数的三种角色和jQuery源码解析
原生js中的函数有三种角色: 分两大种: 1.函数(最主要的角色)2.普通对象(辅助角色):函数也可以像对象一样设置属于本身的私有属性和方法,这些东西和实例或者私有变量没有关系两种角色直接没有必然的关 ...
- koa 基础(十七)原生 JS 中的类、静态方法、继承
1.app.js /** * 原生 JS 中的类.静态方法.继承 * es5中的类和静态方法 */ function Person(name, age) { // 构造函数里面的方法和属性 this. ...
- JavaScript 基础——使用js的三种方式,js中的变量,js中的输出语句,js中的运算符;js中的分支结构
JavaScript 1.是什么:基于浏览器 基于(面向)对象 事件驱动 脚本语言 2.作用:表单验证,减轻服务器压力 添加野面动画效果 动态更改页面内容 Ajax网络请求 () 3.组成部分:ECM ...
- 【面试篇】寒冬求职季之你必须要懂的原生JS(中)
互联网寒冬之际,各大公司都缩减了HC,甚至是采取了“裁员”措施,在这样的大环境之下,想要获得一份更好的工作,必然需要付出更多的努力. 一年前,也许你搞清楚闭包,this,原型链,就能获得认可.但是现在 ...
- 原生js中stopPropagation,preventDefault,return false的区别
1.stopPropagation:阻止事件的冒泡,但不阻止事件的默认行为. 最好莫过于用例子说明: <div id='div' onclick='alert("div") ...
- 原生js中获取this与鼠标对象以及vue中默认的鼠标对象参数
1.通过原生js获取this对象 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
随机推荐
- input()和print()函数同时输入输出多个数据--python3
使用input()和print()函数同时输入输出多个数据,需要空格分割输入信息 #!/usr/bin/python3#-*- conding:utf-8 -*- name, age, QQ = in ...
- CentOS7突然出现无法连接网络的情况--VM下
转自:https://blog.csdn.net/xzm5708796/article/details/83757372 突然出现VM内安装的centos7系统无法通过外部进行连接1.登陆到虚拟机上查 ...
- asp.net 获取 repeater checkbox 值
webform中获取repeat控件列表下的checkbox选中的值: 码农上代码: public static string getSelectedIDs(Repeater Rpt_) { stri ...
- 神州数码DHCP及DHCP中继配置
实验要求:掌握DHCP及DHCP中继配置方法 拓扑如下 R1 enable 进入特权模式 config 进入全局模式 hostname R1 修改名称 interface g0/5 进入端口 ip a ...
- Android Studio 入口程序的设置方法
在src -> main中 ,打开 AndroidManifest.xml 这个文件 下面这里有两个窗口,如果要想把哪个窗口设置成入口窗体,只要把下面红色的放在这个节点中就可以了 <act ...
- VBO最佳实践
VBO的大小 一个VBO应该多大? 你可以创建一个很小的VBO,但最佳方案是把很多对象放到一个VBO里面,这样的话可以减少调用gl函数的数量,比如glBindBuffer.glVertexPointe ...
- mariadb-my.cnf
[client]port = 3306socket = /tmp/mysql.sockdefault-character-set=utf8 [mysqld]port = 3306socket = /t ...
- 论文笔记——An online EEG-based brain-computer interface for controlling hand grasp using an adaptive probabilistic neural network(10年被引用66次)
题目:利用自适应概率网络设计一种在线脑机接口楼方法控制手部抓握 概要:这篇文章提出了一种新的脑机接口方法,控制手部,系列手部抓握动作和张开在虚拟现实环境中.这篇文章希望在现实生活中利用脑机接口技术控制 ...
- eclipse启动tomcat错误解决
clipse启动tomcat报出下面的错误提示: 控制台: 九月 06, 2018 9:01:31 下午 org.apache.tomcat.util.digester.SetPropertiesRu ...
- webpack使用中遇到的问题
http://ife.baidu.com/note/detail/id/534 https://blog.csdn.net/hreticent/article/details/80489851