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

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_text&param1=some_more_text';

I supply this as the 'data' parameter of my jquery ajax() call. So this should be inserted in the body of the POST, right? (I mean, not appended to my 'mysite/save' url?):

$.ajax({
    url: 'mysite/save',
    type: 'POST',
    data: mydata
});

it appears to work correctly. In my servlet, I am just dumping all received parameters, and I see them all come through nicely:

private void printParams(HttpServletRequest req) {
    Enumeration paramNames = req.getParameterNames();
    while (paramNames.hasMoreElements()) { 
        // print each param key/val here.
    }
}

also, I should url encode my data string manually before use, right? Like:

var mydata = 'param0=' + urlencode('hi there!');
mydata += '&param1=' + urlencode('blah blah');
mydata += '%param2=' + urlencode('we get it');

Thanks!

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.

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.

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

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

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