使用JQuery通过Ajax以Json格式发送表单数据

as the title says I'm sending some post data via ajax. but I keep on getting errors, can anyone take a look at the code and explain why my ajax call keeps failing?

正如标题所说我正在通过ajax发送一些帖子数据。但我一直在收到错误,任何人都可以查看代码并解释为什么我的ajax调用会一直失败?

submitForm(jQuery('#priceCalc'), {name: 'thingdoto', value: "true"});

function submitForm(form, data) {
        var postData = form.serializeArray(),
            formURL = form.attr("action");

        postData.push(data);
        console.log(postData);
        jQuery.ajax({
                url : formURL,
                type: 'POST',
                dataType : "json",
                data: postData,
                success:function(data)
                {
                        jQuery('#priceTotal').html(data);
                },
                error: function()
                {
                        jQuery('#priceTotal').html('error');
                }
        });
}

EDIT: The ajax call returns the error, so it's just not succeeding. Don't know why.

编辑:ajax调用返回错误,因此它没有成功。不知道为什么。

2 个解决方案

#1

You're sending data as an array, not a JSON string.

您将数据作为数组发送,而不是JSON字符串。

You want to do something like this.

你想做这样的事情。

$("form#ID").submit(function(e){

    e.preventDefault();

    var data = {}
    var Form = this;

    //Gathering the Data
    //and removing undefined keys(buttons)
    $.each(this.elements, function(i, v){
            var input = $(v);
        data[input.attr("name")] = input.val();
        delete data["undefined"];
    });

    //Form Validation goes here....

    //Save Form Data........
    $.ajax({
        cache: false,
        url : ?,
        type: "POST",
        dataType : "json",
        data : JSON.stringify(data),
        context : Form,
        success : function(callback){
            //Where $(this) => context == FORM
            console.log(JSON.parse(callback));
            $(this).html("Success!");
        },
        error : function(){
            $(this).html("Error!");
        }
    });

#2

Old question, but I just ran into this situation:

老问题,但我刚遇到这种情况:

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

jquery ajax在直接执行时返回成功,但在附加到按钮时返回错误,即使服务器响应为200 OK

And found out that the problem (in my case) was that calling ajax from a button inside a form to send JSON seems to cause JQuery to misinterpret the server response -- and always consider it an error. My solution was to change the form to a div or to change the button tag to an a tag (using Bootstrap to render a as button)

并发现问题(在我的情况下)是从表单内的按钮调用ajax来发送JSON似乎导致JQuery误解服务器响应 - 并且始终认为它是一个错误。我的解决方案是将表单更改为div或将按钮标记更改为标记(使用Bootstrap呈现as按钮)

This worked

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

<form>
    <a></a>
</form>

#1