Why does ajax sometimes urlencode serialised data and sometimes it doesnt?

Question

When I send serialised data to a PHP file using ajax, it is sometimes URL Encoded depending on how i do it.

Originally i had the following code which worked fine:

$.ajax({
        type: 'POST',
        url: 'ajax-process.php',
        data: $("#sitestructure-form").serialize(), 
        success: function(d){$("#structureupdate").html(d);}
});

The data was sent to my PHP file and i could echo it and it looked like this.

[{"id":20,"children":[{"id":21}]},{"id":19},{"id":18,"children":[{"id":14}]},{"id":16},{"id":13,"children":[{"id":11}]},{"id":17},{"id":15},{"id":12}]

I wanted to send more than one piece of data, I called the serialized data 'order' and added 'process' to it so i updated my code to the following:

$.ajax({
        type: 'POST',
        url: 'ajax-process.php',
        data: {
            order: $("#sitestructure-form").serialize(),
            process: "sitemap-reordernavigation"
              },
        success: function(d){$("#structureupdate").html(d);}
                    });

However when I retrieve the serialised data sent in 'order' the output looks like this:

data=%5B%7B%22id%22%3A20%2C%22children%22%3A%5B%7B%22id%22%3A21%7D%5D%7D%2C%7B%22id%22%3A19%7D%2C%7B%22id%22%3A18%2C%22children%22%3A%5B%7B%22id%22%3A14%7D%5D%7D%2C%7B%22id%22%3A16%7D%2C%7B%22id%22%3A13%2C%22children%22%3A%5B%7B%22id%22%3A11%7D%5D%7D%2C%7B%22id%22%3A17%7D%2C%7B%22id%22%3A15%7D%2C%7B%22id%22%3A12%7D%5D

The only way i can think of to fix this problem is to use php to urldecode it and then use str_replace to remove the 'data=' bit at the front, like so.

    $data = str_replace("data=","",urldecode($_POST['order']));

How can I get this to work with AJAX though so i dont have to urldecode it?

Ive tried using a variable and setting the processData to false however that didn't seem to work.

var order = $("#sitestructure-form").serialize();
$.ajax({
        type: 'POST',
        url: 'ajax-process.php',
        processData: false,
        data: {
            order: order,
            process: "sitemap-reordernavigation"
              },
        success: function(d){$("#structureupdate").html(d);}
                    });

My knowledge of AJAX/Jquery is rather limited so any help would be greatly appreciated.

This isn't an issue with php, it is an issue with the way you are handling data in jquery. The data is serialized to a string under the `order` key first and added to the object you are passing into data. Internally, jquery is taking the `data` parameter, seeing it is an object and serializing it again and all the values are url encoded. In the case of `order`, doubly so. — Jonathan Kuhn, Nov 16 '15 at 21:15
I would suggest looking at [this SO post](http://stackoverflow.com/questions/6539502/this-serialize-how-to-add-a-value) about how to add a value to serialized data. See the second answer by Adam. — Jonathan Kuhn, Nov 16 '15 at 21:26
Thanks guys, I fixed it by doing the following: $.ajax({ type: 'POST', url: 'ajax-process.php?', data: $("#sitestructure-form").serialize() + "&action=sitemap-reordernavigation", success: function(d){$("#structureupdate").html(d);} }); — PaulF, Nov 16 '15 at 21:48

score 0 · Answer 1 · edited May 23 '17 at 11:59

0

That's because you are feeding a serialized text string to the data attribute the first time around and jQuery does not convert it to a serialized string. The second you are assigning an object to the data attribute with the "order" attribute having the serialized text string, so jQuery basically double encodes it. For it to act as you'd like you would have to convert the form to an object and assign your "order" attribute to that object. See this post: Convert form data to JavaScript object with jQuery

// taking the example from the above link, you do this instead
order = $("#sitestructure-form"). serializeObject();

edited May 23 '17 at 11:59

Community

1
1

answered Nov 16 '15 at 21:22

Paul Carlton

2,785
2
24
42

Ok, im trying to wrap my brain around this lol I tried this but it just doesnt seem to work at all. ' $.ajax({ type: 'POST', url: 'ajax-process.php', data: {order: $("#sitestructure-form").serializeObject(), process: "sitemap-reordernavigation"}, success: function(d){$("#structureupdate").html(d);} }); ' – PaulF Nov 16 '15 at 21:32

score 0 · Accepted Answer · answered Nov 16 '15 at 21:49

0

Fixed by doing the following:

 $.ajax({
        type: 'POST',
        url: 'ajax-process.php?',
        data: $("#sitestructure-form").serialize() + "&action=sitemap-reordernavigation", 
        success: function(d){$("#structureupdate").html(d);}
});

answered Nov 16 '15 at 21:49

PaulF

124
1
8

This works, but I wouldn't suggest doing it in all cases. Since you are just hard coding a value to append to the data it is likely fine (still wouldn't consider it best practice, but it works). If you were taking additional data from another form field or user input in any way, then you would want to urlencode the key and value that is being appended. Which is why I suggested using the method from the other SO thread. That will properly serialize the data and it is as simple as using jquery's serializeArray method on the form, adding your own entry and passing that to the `param` method. – Jonathan Kuhn Nov 16 '15 at 21:57

Why does ajax sometimes urlencode serialised data and sometimes it doesnt?

2 Answers2