以序列化方式与JSON发送数据

Question

I'm sending data to a server via JavaScript for a REST API (this will be inside a PhoneGap app hence using jQuery rather than any server code). I'm building my own API so I have flexible options, but I wonder if there is a preferred way to handle POST data. I use JSON for the GETs, so should I be using it for the POSTs?

What is the better way to send it?

1) Using the serialize method and then sending it as data, eg :

$('form').submit(function(e){

    e.preventDefault();

    var form = $(this);

    $.ajax({
        type: 'POST',
        url: form.attr('action'),
        data: form.serialize(),
        success: function(response){
            // handle response
        },
        error: function(a,b,c) {
            // handle error
        }   
    });

});

or 2) sending it as a JSON object like:

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

$('form').submit(function(e){

    e.preventDefault();

    var form = $(this);

    $.ajax({
        type: 'POST',
        url: form.attr('action'),
        data: JSON.stringify(form.serializeObject()),
        success: function(response){
            // handle response
        },
        error: function(a,b,c) {
            // handle error
        }   
    });

});

Answer 1

Your second example does pretty much what $.ajax and .serialize() do internally, and the POST data is always sent as a string anyway, so it should'nt really matter one way or the other. The first example seems cleaner and easier to read, so that's an advantage.

Answer 2

Create an empty array, keep on pushing the individual form fields to the array, JSON.stringify the array, and send it via POST.

var formData = [];
//Push individual form elements to this aray, preferably in a "key" : "value" format.
var payload = JSON.stringify(formData);
//Then just send it to the server.

The good part with a JSON object is that you can read it from a variety of server side languages, without any effort..

Plus, you can even use 'key' : 'value' pairs inside the JSON object to manually get the value for each field at the server.

Answer 3

In your question you don't specify what you mean by "better way," so perhaps you should edit your question to clarify that. For example, are you specifically concerned with performance, memory usage, etc. ?

However, in a very general sense I would say the better way to do this type of thing is to go with the approach that you find easier to read, because that's the approach that will be easier to debug, extend, and modify over the course of time. Looking only at the client side code, your first approach appears to be easier to read, but if you are responsible for the server side, you should consider that too. Go with the approach that you think will be easier to maintain overall .

Finally, you don't indicate in your question whether you are going to publish the REST API for others to use, but if you are, then the most important factor is actually how easy it is to read and understand the API. By that measure, you should probably use JSON in both your GETs and POSTs.