jQuery AJAX request data field

Question

I'm using this piece of code to make an ajax call:

 $('#filter').submit(function(){
    var filter = $('#filter');
    $.ajax({
        url:filter.attr('action'),
        data:filter.serialize(), // form data
        type:filter.attr('method'), // POST
        beforeSend:function(xhr){
            filter.find('button').text('caricamento...'); // changing the button label
        },
        success:function(data){
            filter.find('button').text('Filtra'); // changing the button label back
            $('.load').html(data); // insert data
            $('.grve-iso-spinner').hide();
        }
    });
    return false;
});

I need to add more variables to the 'data' attribute, something like:

data : {
        var1: 'value1',
        var2 : 'value2'
    }

How can I merge the two data elements?

Thanks in advance

score 0 · Answer 1 · answered Apr 19 '17 at 07:58

0

You can try this:

data: filter.serialize() + '&key=' + value,

It will add key: value pair to form serialize data. As serialize data is in the form of key: value pair, you can add additional values by following the same pattern

answered Apr 19 '17 at 07:58

Mayank Pandeyz

25,704
4
40
59

score 0 · Answer 2 · answered Apr 19 '17 at 07:58

0

As jQuery serialize() function produces a text string in standard URL-encoded notation, you only have to concatenate the new values you want to add:

var data = filter.serialize();
data += "&var1=" + value1 + "&var2=" + value2;

answered Apr 19 '17 at 07:58

Hulothe

744
1
5
17

score 0 · Answer 3 · edited May 23 '17 at 11:54

0

Take a look at this answer: jQuery post() with serialize and extra data

It uses serializeArray and pushes the extra data to the array instead, you can then pass this array to the ajax call.

var data = $('#filter').serializeArray();
data.push({name: 'wordlist', value: wordlist});

edited May 23 '17 at 11:54

Community

1
1

answered Apr 19 '17 at 07:59

Christer

1,651
1
17
34

score 0 · Answer 4 · answered Apr 19 '17 at 08:02

try this

var data = $('#filter').serializeArray();
data.push({name: 'var1', value: value1});
data.push({name: 'var2', value: value2});

$('#filter').submit(function(){
    var filter = $('#filter');
    $.ajax({
        url:filter.attr('action'),
        data:{ data : data }, // form data
        type:filter.attr('method'), // POST
        beforeSend:function(xhr){
            filter.find('button').text('caricamento...'); // changing the button label
        },
        success:function(data){
            filter.find('button').text('Filtra'); // changing the button label back
            $('.load').html(data); // insert data
            $('.grve-iso-spinner').hide();
        }
    });
    return false;
});

jQuery AJAX request data field

4 Answers4