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

Question

Hi,

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!

Answer 1

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 is a much cleaer/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 2

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.

Answer 3

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 4

you don't need to URL encode POST vars. however if you are interacting with a db you will want to make sure your vars are injection attack protected.

What you have will work, however as Vivin mentioned, if it's a form the best way to do it is via .serialize() I use this a LOT personally for all my form submissions (done via ajax).