Using jquery to make a POST, how to properly supply 'data' parameter?

Question

I\'d like to make an ajax call as a POST, it\'s going to go to my servlet. I want to send parameterized data, like the following:

var mydata = \'param0=some_         


        

Answer 1

You don't need to URL encode POST variables. However if you are interacting with a database, you will want to make sure your variables are injection attack protected.

What you have will work, however as Vivin mentioned, if it's a form then the best way to do it is via .serialize().

I use this a LOT personally for all my form submissions (done via .ajax()).

Answer 2

can this help you

function CallPageSync(url, data) {
    var response;
    $.ajax({
        async: false,
        url: url,
        data: data,
        timeout: 4000,
        success: function(result) {
            response = result;
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            response = "err--" + XMLHttpRequest.status + " -- " + XMLHttpRequest.statusText;
        }
    });
    return response;
}

and you can call it like

response = CallPageSync(checkPageURL, "un=" + username);

Answer 3

You need this part:

data: JSON.stringify({
    BarcodeNumber: $('#shipmentId-input').val(),
    StatusId: $('[name="StatusId"]').val()
}),

Full object :

$.ajax(
    {
        url: "/Agent/Shipment/BulkUpdate",
        method: "POST",
        contentType: "application/json",
        dataType: "json",
        data: JSON.stringify({
            BarcodeNumber: $('#shipmentId-input').val(),
            StatusId: $('[name="StatusId"]').val()
        }),
        success: function (data, textStatus, jqXHR) {
            if (textStatus== "success") {
                alert(data);
                // Handel success
            }
            else {
                // Handel response error
            }
        },
        error: function (jqXHR, textStatus, errorThrown){
              //Handel connection error
            }
        });

Answer 4

An easier way is to provide the data property as an object, like this:

$.ajax({
  url: 'mysite/save',
  type: 'POST',
  data: { param0:'hi there!', param1:'blah blah', param2:'we get it' }
});

Otherwise, yes you should encode it, as anything with an & for example would screw things up very quickly. Providing it as an object represents a much clearer/simpler approach though, in my opinion anyway.

You can also space it out and retrieve properties from other places inline, like this:

$.ajax({
  url: 'mysite/save',
  type: 'POST',
  data: { 
          param0: $('#textbox0').val(), 
          param1: $('#textbox1').val(), 
          param2: $('#textbox2').val()
        }
});

Edit: If you're curious how jQuery does this encoding internally, it's using $.param() (which you can use directly as well) to encode the object to a string, called here, and the guts here.

Answer 5

If you have a form, you can also do var data = jQuery("#myForm").serialize(); which puts it in a form that jQuery.ajax can understand and use. Otherwise, use the object literal described in Nick's answer.