jquery ajax returns 直接执行成功，但 returns 附加到按钮时出错，即使服务器响应是 200 OK

Question

这与其他类似问题有些相关：

jquery ajax returns error but is success

jquery .ajax always returns error - data being added to database

Jquery Ajax Call always returns error

不过，我的问题好像不是data:"json"的问题。

我的代码是对服务器的简单 POST 请求，出于测试目的，它总是 returning 200 OK。

如果我运行在文档准备好后直接 jquery 代码，它工作正常并调用 success 函数。

但是如果我将它附加到 on("click") 按钮事件，它总是 return 错误函数。服务器上没有任何变化，我可以在控制台上看到正在调用正确的资源。

我的主要代码位于 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;
        }
    });

这很好用：服务器被调用，内容被 returned 并且 JQuery 调用 success 函数。

但是，如果我将此代码附加到按钮事件，它总是 return 是 error 函数。我正在监控服务器，我确信它正在 return 发送正确的数据。

$("#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;
        }
    });
});

根据记录，我的服务器是 Node.js 和 Sails.js，但这似乎无关紧要。

许多类似的问题在某种程度上与 data:"json" 问题相关，但我已将其删除，最奇怪的是只有在将代码附加到事件时才会发生这种行为。

我怀疑涉及某种范围界定问题（例如，在文件上实例化对象），但服务器每次都被正确调用。我只是不明白为什么 JQuery 将所有响应都解释为错误（和空服务器数据）。

我做错了什么？

Answer 1

在一个疯狂的下午尝试了各种组合之后，一个灯泡熄灭了，我发现问题是我的按钮 html 在 form.

内

<form>
    <button></button>
</form>

更改为常规 div 后，它起作用了。

<div>
    <button></button>
</div>

对我来说，这绝对是疯了。发送 ajax 查询时，JQuery 捕获的信息似乎比我们看到的要多，这会通过预期某种形式的编码行为来扰乱响应解析。这是否意味着我的表单中不能有特殊用途的按钮？因为我使用的是 Bootstrap，那是 "OK" 因为我可以为此使用 a 标签（经过测试和工作）。但这似乎是一个 JQuery 错误（版本：1.11.2）

jquery ajax returns 直接执行成功，但 returns 附加到按钮时出错，即使服务器响应是 200 OK

jquery ajax returns success when directly executed, but returns error when attached to button, even though server response is 200 OK

javascript

ajax

jquery

json

sails.js