1

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.

3
  • 2
    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. Commented Nov 16, 2015 at 21:15
  • I would suggest looking at this SO post about how to add a value to serialized data. See the second answer by Adam. Commented Nov 16, 2015 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
    Commented Nov 16, 2015 at 21:48

2 Answers 2

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();
1
  • 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
    Commented Nov 16, 2015 at 21:32
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);}
});
1
  • 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. Commented Nov 16, 2015 at 21:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.