PHP 中使用ajax时一些常见错误总结整理


Posted in PHP onFebruary 27, 2017

PHP作为后端时,前端js使用ajax技术进行相互信息传送时,经常会出错误,对于新手来说有些手足无措。总结错误、经验,以后随时回顾。

第一个问题,当前端无错误的情况下,页面调试也显示没有问题,但是ajax获取不到后端php文件发送过来的信息:

前端代码如下:

$.ajax({
  url:'1.php',//目的php文件
  data:{"age":12,"name":'zh'},//传送的数据
  type:‘post',//方式post/get
  dataType:'json',//数据传送格式
  success:function(response)
  {
  console.log(response);
  },
  error:function(response)
  {
  console.log(response);
  console.log("错误");
  }
});

php后端代码如下:

$postAge = $_POST['age'];
$postName = $_POST['name'];
echo $postAge;
echo $postName;

页面出现后,F12调试查看如下所示:

PHP 中使用ajax时一些常见错误总结整理

状态码都没问题,status是200,responseReady是4,说明在html发送给php文件信息过程是没有问题的。而且php也返回了信息。可是为什么程序走了error而没有走success呢?

这时需要小心!由于php后端多个echo没有把数据整理为json格式。也就是说php返回的是一个字符串不是json格式的数据。有人说加上json_encode()呢?这样也是不行的,因为json_encode()的函数作用没搞清,百度仔细看下。json_encode()与json_decode()是一对。

json_encode(json),把json整理为json格式的数据。在上例中,就算php后端代码改写为:echo json_encode(postAge);和echojsonencode(postName);也是不对的。因为这样仅仅是把单个postAge和postName整理为了json格式,但是由于是2个返回,既是2个response,在浏览器调试页面也可以看到1个post回来2个response。这样导致2个json格式的数据返回给前端是就不再是json格式的数据(我理解为json污染,方便理解)。也就是单个数据是json格式但是多个json格式数据“胡乱”结合在一起不按照json格式合并在一起就会产生“污染”。导致整体数据格式混乱无法被识别,这种情况者数据处理和传输时随时都见得到。

json_decode(json,true/false)函数是把json整理为数组或者object(理解为类)。true是强制装换为(关联)数组,false是默认的会转换为object形式的数据。

回到本文提出的例子上。

既然传送回来的数据不再是json格式的数据,那么就是dataType的问题了。

dataType是告诉浏览器检查传送的数据格式。如果不写,浏览器不会去检查数据格式,写了就一定检查而且必须满足格式要求。本例中,由于写了为json格式,但是传回来时不是json格式,所以浏览器认为传输过程中出现了错误,所以走了error而没有走success。

这时最好的方式是修改php代码,将echo的内容改为一个数组,用数组的信形式把整体数据整理为json格式进行传送(json_encode),避免发生错误。

当然也可以使用另一种方法,类似作弊的方法,直接注释掉(或者不写)dataType,这样浏览器就不会去检查数据的形式而是根据数据的形式智能的判断,类似蒙混过关。

 以下是dataType的W3school解释:

PHP 中使用ajax时一些常见错误总结整理

值得注意的是,后端php文件中多个echo输出后,数据返回确是一起返回的,既是修改正确后,前端得到的数据是2个数据合为一个字符串的形式数据。本例子中得到的数据是12zh。

当然还有很多细节问题了,比如php后端只能用echo或者die(),不能用return,这是因为return是只在服务器端中返回数据使用,而echo是打印数据,将数据从服务器端打印出来,给前端。return只能在服务器端,或者前端单一的返回。而die()的强大就不提了,直接终止后端php程序的形式返回数据。

还有比如在$,ajax({});中每一行既是一个参数,参数之间是逗号隔开,多个数据是在{}内,隔开是用逗号等等。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

PHP 相关文章推荐
PHP在特殊字符前加斜杠的实现代码
Jul 17 PHP
php提示undefined index的几种解决方法
May 21 PHP
Linux下实现PHP多进程的方法分享
Aug 16 PHP
基于php无限分类的深入理解
Jun 02 PHP
简单说说PHP优化那些事(经验分享)
Nov 27 PHP
PHP中使用imagick实现把PDF转成图片
Jan 26 PHP
yii2使用ajax返回json的实现方法
May 14 PHP
Smarty简单生成表单元素的方法示例
May 23 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
Aug 30 PHP
实例讲解php将字符串输出到HTML
Jan 27 PHP
如何运行/调试你的PHP代码
Oct 23 PHP
php远程请求CURL案例(爬虫、保存登录状态)
Apr 01 PHP
PHP/HTML混写的四种方式总结
Feb 27 #PHP
老生常谈文本文件和二进制文件的区别
Feb 27 #PHP
php实现数据库的增删改查
Feb 26 #PHP
php查询及多条件查询
Feb 26 #PHP
php批量删除操作代码分享
Feb 26 #PHP
浅谈PHP的反射API
Feb 26 #PHP
CentOS 上搭建 PHP7 开发测试环境
Feb 26 #PHP
You might like
php4的session功能评述(一)
2006/10/09 PHP
整合了前面的PHP数据库连接类~~做成一个分页类!
2006/11/25 PHP
PHP判断数据库中的记录是否存在的方法
2014/11/14 PHP
JQuery对表单元素的基本操作使用总结
2014/07/18 Javascript
Angular页面间切换及传值的4种方法
2016/11/04 Javascript
微信小程序实现多宫格抽奖活动
2020/04/15 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
2018/03/22 Javascript
vue 中引用gojs绘制E-R图的方法示例
2018/08/24 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
2018/09/29 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
2018/12/11 jQuery
JavaScript实现烟花绽放动画效果
2020/08/04 Javascript
vue绑定数字类型 value为数字的实例
2020/08/31 Javascript
详解vue 中 scoped 样式作用域的规则
2020/09/14 Javascript
如何在Express4.x中愉快地使用async的方法
2020/11/18 Javascript
Python字典操作简明总结
2015/04/13 Python
为Python的web框架编写MVC配置来使其运行的教程
2015/04/30 Python
Python数据库的连接实现方法与注意事项
2016/02/27 Python
python内置数据类型之列表操作
2018/11/12 Python
计算机二级python学习教程(3) python语言基本数据类型
2019/05/16 Python
python基于json文件实现的gearman任务自动重启代码实例
2019/08/13 Python
Python SMTP配置参数并发送邮件
2020/06/16 Python
音频处理 windows10下python三方库librosa安装教程
2020/06/20 Python
Python request中文乱码问题解决方案
2020/09/17 Python
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
2016/03/14 HTML / CSS
HTML5+css3:3D旋转木马效果相册
2017/01/03 HTML / CSS
英国时尚优质的女装:Hope Fashion
2018/08/14 全球购物
英国最大的在线亚洲杂货店:Red Rickshaw
2020/03/22 全球购物
新闻专业推荐信范文
2013/11/20 职场文书
计算机专业学生求职信分享
2013/12/15 职场文书
酒店总经理欢迎词
2014/01/15 职场文书
竞选学委演讲稿
2014/09/13 职场文书
2014年节能降耗工作总结
2014/12/11 职场文书
检讨书范文300字
2015/01/28 职场文书
爱心募捐通知范文
2015/04/27 职场文书
Nginx配置之实现多台服务器负载均衡
2021/08/02 Servers
vue打包时去掉所有的console.log
2022/04/10 Vue.js