Use JS variables and serialize for AJAX request

Question

I'd like to have the following code in my AJAX request:

function ajax_post( form_info ){
    var request = $.ajax({
    url: "ajax_handler.php",
    type: "POST",
       data: {data : form_info},
    });
};

I'd like to serialize all of the elements in my clicked event to pass directly to the AJAX function because I'm doing processing on the PHP side. Say I have the following on click function:

$('.open-popup').on("click", function() {
    var clicked_id = $(this).attr('id');
    var contest_id = $('#contest-id').val();
    var contest_type = $('#contest_type').val();
    //serialize everything to a data_to_pass variable
    ajax_post( data_to_pass );
});

How could I serialize the clicked_id, contest_id and contest_type into a single variable to pass to my AJAX processing function as a single string of data?

Possible duplicate of [How to serialize form stored in a variable jQuery](http://stackoverflow.com/questions/33974503/how-to-serialize-form-stored-in-a-variable-jquery) — DiniZx, Jul 19 '16 at 09:00
@DiniZx These elements aren't in a form so I'm not trying to serialize the form. — user1048676, Jul 19 '16 at 09:01

score 2 · Accepted Answer · answered Jul 19 '16 at 08:58

This is how you can do it:

var data_to_pass = {
   clicked_id: clicked_id,
   contest_id: contest_id,
   contest_type: contest_type
}

JS:

$('.open-popup').on("click", function() {
    var clicked_id = $(this).attr('id');
    var contest_id = $('#contest-id').val();
    var contest_type = $('#contest_type').val();
    var data_to_pass = {
       clicked_id: clicked_id,
       contest_id: contest_id,
       contest_type: contest_type
    };
    ajax_post( data_to_pass );
});

AJAX:

function ajax_post( form_info ){
    var data = JSON.stringify(form_info);
    var request = $.ajax({
    url: "ajax_handler.php",
    type: "POST",
       data: {data : data},
    });
};

score 1 · Answer 2 · answered Jul 19 '16 at 08:58

You can create FormData for that and append all the required values with .append() function.

Like this,

$('.open-popup').on("click", function() {
    var clicked_id = $(this).attr('id');
    var contest_id = $('#contest-id').val();
    var contest_type = $('#contest_type').val();
    //serialize everything to a data_to_pass variable

    var fd = new FormData();
    fd.append( 'clicked_id', clicked_id);
    fd.append( 'contest_id', contest_id);
    fd.append( 'contest_type', contest_type);

    ajax_post(fd);
});

And AJAX function would look something like this,

function ajax_post( form_data ){
    var request = $.ajax({
        url: "ajax_handler.php",
        type: "POST",
        data: form_data,
    });
};

And access the data in PHP using $_POST['clicked_id'] and so on...

score 1 · Answer 3 · answered Jul 19 '16 at 09:09

1

jQuery's ajax accepts objects as data; it takes care of the serialization for you. So you can simply do

ajax_post({
    clicked_id:$(this).attr('id'),
    contest_id:$('#contest-id').val(),
    contest_type: $('#contest_type').val()
});

answered Jul 19 '16 at 09:09

BeetleJuice

39,516
19
105
165

score 0 · Answer 4 · edited May 23 '17 at 12:32

0

If you want to do so, try using a form element and inputs (it can be hidden fields if it isn't a user submitted form) in your HTML code, and serialize it, so you can transmit the whole 'block of information' at one time with Ajax.

Look at rfunduk's answer at this question.

edited May 23 '17 at 12:32

Community

1
1

answered Jul 19 '16 at 09:02

Luc Ettlinger

71
6

Use JS variables and serialize for AJAX request

4 Answers4