本文分析jQuery Ajax中success回调不执行的两个常见原因。一是HTML元素(如a标签)的href属性导致页面在AJAX返回前刷新,需改为#或同步提交;二是jQuery 1.4+版本对JSON格式校验严格,非标准JSON(如键名无双引号)会触发parse error导致进入error回调。
Ajax success回调不执行与页面刷新问题
首先展示相关代码片段:
具体实现如下:
$.ajax({
type: "post",
url: "jsp/loginManager.jsp",
data: "name=" + $('#rname').attr('value') + "&pwd=" + $('#pwd').attr('value'),
dataType: "text",
success: function(data) {
alert(data);
}
}); 点击登录按钮后,后端数据库连接正常且查询到了数据(在loginManager.jsp中通过System.out.print()打印了查询结果)。然而,success回调中的代码并未执行。通过断点调试发现,执行完dataType解析后,程序直接跳出了success回调,内部的alert()语句未被触发。这是为什么呢?
随后修改了代码,调整如下:
JavaScript代码:
具体代码如下:
$.ajax({
type: "post",
url: "jsp/loginManager.jsp",
async: true,
data: "name=" + $('#rname').attr('value') + "&pwd=" + $('#pwd').attr('value'),
dataType: "text",
success: function(data) {
alert(data);
},
error: function(e) {
alert(e);
}
}); 但问题依旧,没有任何反应,只是登录页面发生了刷新。
针对上述页面刷新的问题,原因在于a标签的配置有误。原本a标签中设置了href="",导致页面刷新。在AJAX请求发出后、响应返回前,页面已经刷新,因此虽然提交了数据并获得了结果,但来不及处理返回数据就刷新了页面。将href改为"#"即可解决此问题,例如:
<a href='#' onclick= ‘delMenuContent(cellvalue)>
另一个原因是使用了异步提交。在验证成功之前,按钮的提交事件已经执行,导致页面刷新。将其改为同步提交,确保按钮的提交事件等待AJAX验证结束并判断是否继续提交,即可解决该问题。
jQuery版本与JSON格式严格校验
近期研究jQuery API文档时,发现使用jQuery的ajax功能并指定dataType为json时,success回调总是不执行,反而执行了error回调函数,令人困惑。后来尝试jQuery 1.2.6版本,success回调可以正常执行。
接着下载了其他几个jQuery版本,如1.3.2和1.4.0,当指定dataType为json时,success回调均无法执行,只有低于1.3版本的jQuery才能正常执行success回调。
最后访问jQuery官网查看在线API文档,地址为:http://api.jquery.com/jQuery.ajax/ ,发现关于dataType的说明如下:
"json": 将响应数据作为 JSON 格式进行求值,并返回一个 JavaScript 对象。在 jQuery 1.4 中,JSON 数据以严格模式进行解析;任何格式错误的 JSON 都将被拒绝,并抛出解析错误。(有关更规范的 JSON 格式信息,请参阅 json.org。)
原来jQuery 1.4版本之后对JSON格式的要求非常严格,必须满足json.org网站定义的格式才能执行success回调,否则都会出错,无法解析返回的JSON数据。文档提到的是1.4及以上版本,那么为什么下载的1.3.2版本指定dataType为json时也不能执行success回调呢?
现在明白了,原来我返回的是{success:true,id:1}这种不规则的字符串,并非严格的JSON格式。将其改为{"success":true,"id":"1"}后,就可以正常执行success回调了。
总结JSON格式要点,详细内容可前往json.org查看。
1)键名称:需用双引号括起
2)字符串:需使用双引号括起
3)数字、布尔类型不需要使用双引号括起