jQuery的AJAX直接返回执行时的成功，但是当连接到按钮返回错误，即使服务器响应200 OK [英] jquery ajax returns success when directly executed, but returns error when attached to button, even though server response is 200 OK

问题描述

这在某种程度上与其他类似的问题：

This is somewhat related to other similar questions:

jQuery的AJAX返回错误，而是成功

<一个href="http://stackoverflow.com/questions/18862066/jquery-ajax-always-returns-error-data-being-added-to-database">jquery阿贾克斯总是返回错误 - 数据被添加到数据库

jQuery的Ajax调用总是返回错误

不过，我的问题似乎并没有成为数据：JSON问题

However, my problem doesn't seem to be the data:"json" issue.

我的code是一个简单的POST请求到服务器，用于测试目的，它总是返回200 OK。

My code is a simple POST request to a server and, for testing purposes, it is always returning 200 OK.

如果我直接文件后运行了jQuery code准备好了，它工作得很好，并调用成功的功能。

If I run the jquery code directly after document ready, it works just fine and calls the success function.

但是，如果我将其附加到的（点击）按钮时，它总是返回错误的功能。什么都没有改变的服务器上，我可以在正确的资源被调用控制台上看到的。

But if I attach it to a on("click") button event, it always return the error function. Nothing has changed on the server and I can see on the console that the right resource is being called.

我的主要code坐落在一个js文件：

My main code is located on a js file:

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();

接着，第一种方案：直接拨打在页面加载的功能：

Then, the first scenario: call the function directly on page load:

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调用成功功能

This works fine: the server is called, the content is returned and JQuery calls the success function.

不过，如果我附上这个code按钮事件，它总是返回错误功能。我监视服务器，我相信它返回正确的数据。

However, if I attach this code to a button event, it always returns the error function. I am monitoring the server and I am sure it is returning the correct data.

$("#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的，但这似乎并不重要。

For the records, my server is Node.js with Sails.js, but this doesn't seem to matter.

在很多类似的问题，在某种程度上关系到数据：JSON的问题，但我已经删除了，最奇怪的是，该行为只发生在你请将code到事件。

The many similar questions are somehow related to the data:"json" issue, but I've removed it and the most weird is that the behavior only happens when you attach the code to an event.

我怀疑有某种参与（对象被实例化上的文件，为前。）范围界定问题，但服务器的调用是否正确每次。我只是不明白为什么JQuery的跨$ P $点所有响应为错误（和空的服务器数据）。

I would suspect there is some kind of scoping issue involved (object being instantiated on the file, for ex.), but the server is being correctly called every time. I just can't understand why JQuery interprets all responses as errors (and empty server data).

我在做什么错在这里？

推荐答案

在一个疯狂的下午，尝试各种组合，一个灯泡去了，我想通了，问题是，我的按钮，HTML是在表格。

After an insane afternoon trying all kinds of combinations, a light bulb went off and I figured out the problem is that my button html was inside a form.

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

更改为普通的 DIV 之后，它的工作。

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

这是 - 我 - 绝对的疯狂。这似乎JQuery的捕获发送AJAX查询时，这个被期待某种形式的连接codeD行为搞乱响应解析比所看到的更多的信息。这是否意味着我不能在我的形式特殊用途按钮？由于我使用的引导，这是OK，因为我可以使用 A 标记这个（测试工作）。但是，这似乎是一个JQuery的错误（版本：1.11.2 ）

Which is -- to me -- absolutely insane. It seems JQuery captures more information than meets the eye when sending the ajax query, and this was messing the response parsing by expecting some form encoded behavior. Does it mean I cannot have special purpose buttons inside my forms? Since I am using Bootstrap, that's "OK" because I can use the a tags for this (tested and worked). But this seems a JQuery bug (version: 1.11.2)

这篇关于jQuery的AJAX直接返回执行时的成功，但是当连接到按钮返回错误，即使服务器响应200 OK的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！