AJAX jQuery 400错误

Question

I would like to get a second set of eye on this code.

formPaymentData is an JSON string of objects extracted from the form. I then went on to form a partial list params from formPaymentData, called _newData. I used _newData for my AJAX request.

the csrfmiddlewaretoken is a Django specific term, and I had to include it for the AJAX request. Without it, it produced a 403 error.

All I got was 400 error so I have no clue where to debug...

formPaymentData = $form.serializeArray();

console.log('before: -------------------------')
for (var i = 0; i < formPaymentData.length; i++) {
    console.log(formPaymentData[i].name + ': ' + formPaymentData[i].value);
}

var tempArray = [];
for (var i = 0; i < formPaymentData.length; i++) {
    if (formPaymentData[i].name == 'products' && formPaymentData[i].value != '') {
        tempArray.push(formPaymentData[i].value);
    }
}
productDataString = tempArray.join(',');
/*Construct JSON OBJECT */

reqParams = ['csrfmiddlewaretoken', 'order_number', 'shop_id'];
var _newData = []; // Extracted data
$.each(formPaymentData, function (index, data) {
    if ($.inArray(data.name, reqParams) !== -1 && data.name != 'products') {
        _newData.push(data);
    }
});

var dataProducts = {};
dataProducts.name = 'products';
dataProducts.value = productDataString;
_newData.push(dataProducts);

reqParams = ['height', 'width', 'length'];
$.each(formPaymentData, function (index, data) {
    if ($.inArray(data.name, reqParams) !== -1 && data.name != 'products') {
        _newData.push(data);
    }
});

JSON.stringify(_newData);
console.log('After stringify:');
console.log(_newData);
/*end Construct JSON OBJECT */

$.ajax({
    url: "/request_label",
    type: "POST",
    data: _newData,
    success: function (data) {
        console.log("Request complete.");
        console.log(data);
    },
    error: function (data) {
        console.log("failed");
        console.log(data);
    }
});

Answer 1

If your server is expecting JSON, you need to set contentType: 'application/json' in your $.ajax call; otherwise JQuery will send application/x-www-form-urlencoded which isn't what the server is expecting. Additionally, you need to call JSON.stringify on your data so jQuery will send it as is rather than trying to encode it as application/x-www-form-urlencoded