![](/img/trans.png)
[英]Ajax request returns 200 OK, but an error event is fired instead of success
[英]jquery ajax returns success when directly executed, but returns error when attached to button, even though server response is 200 OK
这与其他类似问题有些相关:
jquery .ajax总是返回错误 - 数据被添加到数据库
但是,我的问题似乎不是data:"json"
问题。
我的代码是对服务器的简单POST请求,出于测试目的,它总是返回200 OK。
如果我在文档就绪后直接运行jquery代码,它就可以正常工作并调用success
函数。
但是如果我将它附加到on("click")
按钮事件,它总是返回错误函数。 服务器上没有任何变化,我可以在控制台上看到正在调用正确的资源。
我的主要代码位于js文件中:
var myObj = function(){
var url = "myURL";
this.functionINeed = function(data, cb) {
ajaxPost(url, data, cb);
};
function ajaxPost(url, data, cb){
$.ajax({
"url" : url,
"contentType" : "application/json; charset=UTF-8",
"data" : data,
"type" : "POST",
"success" : function(serverData, textStatus, jqXHR){
cb(null, {
"serverData" : serverData,
"textStatus" : textStatus,
"jqXHR" : jqXHR
});
},
"error": function (jqXHR, textStatus, errorThrown) {
cb({
"jqXHR" : jqXHR,
"textStatus" : textStatus,
"errorThrown" : errorThrown
});
}
});
};
}
//I initialize the object directly on the js file
MyObj = new myObj();
然后,第一个场景:直接在页面加载时调用函数:
var data = {
"action" : "someaction",
"code" : "somecode"
}
MyObj.functionINeed(JSON.stringify(data), function(err, response){
if(err){
alert(err.errorThrown);
return err;
}else{
alert(response.textStatus);
return response;
}
});
这很好用:调用服务器,返回内容,JQuery调用success
函数。
但是,如果我将此代码附加到按钮事件,它总是返回error
函数。 我正在监视服务器,我确信它正在返回正确的数据。
$("#myButton").on("click", function(){
var data = {
"action" : "someaction",
"code" : "somecode"
}
MyObj.functionINeed(JSON.stringify(data), function(err, response){
if(err){
alert(err.errorThrown);
return err;
}else{
alert(response.textStatus);
return response;
}
});
});
对于记录,我的服务器是带有Sails.js的Node.js,但这似乎并不重要。
许多类似的问题在某种程度上与data:"json"
问题,但我删除了它,最奇怪的是只有在将代码附加到事件时才会发生这种行为。
我怀疑存在某种范围问题(对象在文件上实例化,例如),但每次都正确调用服务器。 我只是无法理解为什么JQuery将所有响应解释为错误(以及空服务器数据)。
我在这做错了什么?
在一个疯狂的下午尝试各种组合后,一个灯泡熄灭,我发现问题是我的按钮html在一个form
。
<form>
<button></button>
</form>
更改为常规div
,它工作正常。
<div>
<button></button>
</div>
对我来说,这绝对是疯了。 在发送ajax查询时,似乎JQuery捕获的信息比满足眼睛的要多,而这通过期望某些表单编码行为来破坏响应解析。 这是否意味着我的表单中没有特殊用途的按钮? 因为我使用的是Bootstrap,所以“OK”因为我可以使用a
标签(测试和工作)。 但这似乎是一个JQuery错误( 版本:1.11.2 )
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.