是什么样的空白字符导致我的Ajax请求出现parseerror错误?

本文详细解析了使用jQuery AJAX请求时遇到parseError的原因,指出水平制表符(u0009)导致JSON格式转换失败的问题,并提供了解决方案。

 

一、为啥jQuery的ajax请求成功却总是执行error方法?

 

需要完成一个局部刷新页面的功能,选择jQuery的ajax方法获取数据,代码如下:

 

                $.ajax({
                     url:url,
                     data:p,
                     dataType:"json",
                     type:"post",
                     success:function(json){
                         if(typeof(opts.okHandle)=="function") {
                             opts.okHandle(json);
                         }

                     },
                     error:function(xmlReq,err){
                         if(typeof(opts.errHandle)=="function"){
                             opts.errHandle(xmlReq,err);
                         }
                     }
                 });
 

 

 

在测试的过程中发现ajax请求完成之后并没有如期执行success方法,利用firebug设置断点才发现原来是执行了error方法,并且抛出了一个parseerror的错误,原来是在对响应值(resonseText)的内容进行json格式转换的时候出现问题了。

 


 

二、响应值(resonseText)的哪个字符出了问题?

 

利用json格式化工具(http://jsonformatter.curiousconcept.com/),检查resonseText的值,终于发现这串有问题的字符:

<p class=\"ugc\">12、 开心一笑:辩护人:裴日红你是否敢问证人讯问时是否对你进行了刑讯逼供?裴日红:“敢”,审判长:“辩护人!这个程序是你启动还是法庭启动?”哈哈。。。</p>

 

继续定位,最终确定“12、”与“开心一笑”之间的空白是罪魁祸首!


 

 

三、出问题的空白字符是什么?

 

这个空白究竟是什么字符,造成格式化json失败?利用NATIVE/ASCII编码互转工具(http://tool.chinaz.com/Tools/native_ascii.aspx),发现空白的ASCII代码为“\u0009

 


 

\u0009水平制表符的Unicode编码,它对应的转义字符为\t。终于真相大白了。

 

四、是水平制表符(\u0009)导致了json格式转换失败!

 

小提示:一般在网页的输入框内手动无法输入水平制表符,可以利用记事本先输入一个字符串,在字符串的中间按一下键盘的“Tab”键即可,然后通过复制粘贴进行测试。

 

 

 

 

 

 

AJAX请求中,JSONJavaScript Object Notation)常作为数据格式来与服务器进行数据交互。JSON是一种轻量级的数据交换格式,易于人类阅读和编写,同时也易于机器解析和生成。 ### AJAX请求使用JSON格式的原理 AJAX的目的是在不刷新整个页面的情况下与服务器进行异步通信,根据服务器响应信息动态改变页面内容。其中,“X”原本代表XML,但现在JSON格式更为常用。JSON规范且轻量级,相比XML无需定义规范标签 [^1]。 ### AJAX请求JSON格式的使用方式 #### 发送JSON数据 可以将JS对象转换为JSON字符串进行传输,使用AJAX方法处理请求时,需设置请求头`Content-Type`为JSON格式。示例代码如下: ```javascript function submitData() { $.ajax({ type: "POST", url: "/mvc/submit", data: JSON.stringify({ name: "测试", age: 18 }), success: function (data) { window.alert(JSON.stringify(data)); }, contentType: "application/json" }); } ``` 在上述代码中,`JSON.stringify()`将JS对象转换为JSON字符串,请求头`contentType`设置为`application/json`,确保服务器知道请求数据为JSON格式 [^2]。 #### 接收JSON数据 手动设置数据转换,将服务器返回的JSON格式字符串转换为对象。示例代码如下: ```javascript window.onkeydown = function() { const result = document.getElementById('result'); const xhr = new XMLHttpRequest(); xhr.open('GET', 'http://127.0.0.1:8000/json-server'); xhr.send(); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status < 300 && xhr.status >= 200) { let data = JSON.parse(xhr.response); result.innerHTML = data.name; } } } } ``` 在上述代码中,`JSON.parse()`将服务器返回的JSON字符串解析为JS对象,便于后续处理 [^4]。 ### AJAX请求JSON数据的基本工作原理 1. **创建XMLHttpRequest对象**:这是AJAX通信的核心,允许JavaScript与服务器建立连接并发送请求。 2. **发送请求**:使用`open()`方法设置请求类型(如GET、POST)和URL,然后使用`send()`方法发送请求。 3. **处理响应**:监听`onreadystatechange`事件检测服务器响应状态,响应准备好后读取服务器响应数据(通常为JSON格式)。 4. **更新页面**:使用JavaScript解析和处理接收的数据,动态更新页面相应部分 [^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值