JQuery AJAX POST Sending Only Partial Data? Try URL Encoding.


JQuery is a great JavaScript framework that makes web developer life much easier. But like all framework, you need to learn its gotchas in order to work effectively with it. Here is one of those gotchas –

Jquery POST method lets you create Ajax HTTP POST request to the server. It is actually a shorthand to the JQuery Ajax method:


$.ajax({
  type: "POST",url: "save.php",
  data: "param1="+paramValue1
  +"&param2=paramValue2",
  complete: function(){ }, //manage the complete if needed
  success: function(){}}//get some data back to the screen if needed
});

The problem

When executing the AJAX call, only part of the data is passed to the server and the rest vanishes. You usually see that some or all of the parameters you tried to pass are missing or cut in the middle.

The cause

JQuery uses ‘&’ as a separator between the parameters. If you have a ‘&’ within your key or value parameters, then the JQuery AJAX request gets really messed up.

The solution

Encode the parameters, replace & with %26 which is the standard encoding for that character.

Semi-Automatic

Use .replace(/&/g, “%26”) –

Here is a working example:


$.ajax({
  type: "POST",url: "save.php",
  data: "param1="+paramValue1.replace(/&/g, "%26")
  +"&param2=paramValue2.replace(/&/g, "%26")",
  complete: function(){ }, //manage the complete if needed
  success: function(){}}//get some data back to the screen if needed
});
Fully Automatic

A more elegant way is to slightly change the way we call the meethod and let JQuery do that encoding for you –

Here is a working example:


$.ajax({
 type: "POST",url: "save.php",
 data: { "param1": paramValue1,
 "param2": paramValue2 },
 complete: function(){ }, //manage the complete if needed
 success: function(){}//get some data back to the screen if needed
});
Share the love...Tweet about this on TwitterShare on LinkedInShare on Google+Share on Facebook

Amir Shevat

Amir Shevat is the global Startup Outreach lead in Google Developer Relations (g.co/launch). Previously, Amir Led Google Campus Tel Aviv and was the co founder of several startups.

You may also like...

7 Responses

  1. nick says:

    hello, if got that problem to send 2 var at the same time to the db. here my code… i need a hint

    thx

    $(‘.myipwe’).editable(
    {
    type: ‘wysiwyg’,
    editor: oFCKeditor,
    onSubmit:function submitData(content,textprioid){
    $.ajax({
    type: “POST”,url: “save.php”,
    data: {“content”: content.current,”textprioid”:textprioid.current},

    complete: function(){ }, //manage the complate if needed
    success: function(html){ }//get some data back to the screen if needed
    }); //close $.ajax(
    },
    submit:’save’,
    cancel:’cancel’
    });

  2. pavan says:

    Thanks a Lot Saved a lot of my time.

  3. Brian says:

    Huge! God, I wish I would’ve searched for “ajax posting incomplete” like four hours ago. I’d have more hair and would feel like getting less celebratory-drunk now that I’ve solved this issue. Cheers.

  4. anonymous says:

    If you submit the data as key/value pairs the url encoding is all done for you by jQuery.

    Here is an example:

    $.ajax({
    type: "POST",url: "csave.php",
    data: { "param1": paramValue1,
    "param2": paramValue2 },
    complete: function(){ }, //manage the complate if needed
    success: function(){}//get some data back to the screen if needed
    });

  5. Amir Shevat says:

    Great! Added to the body of the post.

    Cheers
    Amir Shevat

  1. November 25, 2010

    […] […]

Leave a Reply

Your email address will not be published. Required fields are marked *