但是,我的问题似乎不是data:"json"问题。
data:"json"
我的代码是对服务器的简单POST请求,出于测试目的,它始终返回200 OK。
如果我在准备好文档后直接运行jquery代码,它就可以正常工作并调用该success函数。
success
但是,如果我将其附加到on("click")按钮事件,它将始终返回错误函数。服务器上没有任何更改,我可以在控制台上看到正在调用正确的资源。
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函数。我正在监视服务器,并且我确定它会返回正确的数据。
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
<form> <button></button> </form>
更改为常规后div,它起作用了。
div
<div> <button></button> </div>
对我来说,这绝对是疯了。发送Ajax查询时,JQuery似乎捕获了比实际需要更多的信息,并且由于期望某种形式的编码行为,这使响应解析混乱。这是否意味着我的表单中不能有特殊用途的按钮?因为我使用的是Bootstrap,所以“确定”,因为我可以a为此使用标签(经过测试和工作)。但这似乎是一个JQuery错误( 版本:1.11.2 )
a