: jQuery.ajax({ ty...">
Geek Answers Handbook

Adding multiple data with jQuery ajax

I can process my form values ​​by targeting the form class <form class="my_form_class"> :

 jQuery.ajax({ type:"GET", url: "/wp-admin/admin-ajax.php", data: my_form_class, context: this, success:function(data){ // do stuff } });

This works great.

But I want to add more data, so I tried:

 data: { my_form_class, security : 'foo' },

This did not work. What am I doing wrong here? I tried:

 data: { my_form_class : my_form_class, security : 'foo' },

And that obviously didn't work.

+5
source share
3 answers

According to jQuery ajax definition

data

Type: PlainObject or String or Array Data to send to the server. It is converted to a query string if it is not already a string. It is added to the URL for GET requests. See the processData parameter to prevent this automatic processing. The object must be key / value pairs. If the value is an array, jQuery serializes multiple values ​​with the same key based on the value of the traditional setting (described below).

You can use jquery parameter and jQuery serialize :

 $('.my_form_class').serialize() + '&' + $.param({security : 'foo'});

My snippet:

 $(function () { $('#btn').on('click', function(e) { console.log($('.my_form_class').serialize() + '&' + $.param({security : 'foo'})); $.ajax({ type:"GET", url: "/wp-admin/admin-ajax.php", data: $('.my_form_class').serialize() + '&' + $.param({security : 'foo'}), context: this, success:function(data){ // do stuff } }).fail(function(jqXHR, textStatus, errorThrown) { console.log('ajax error: ' + textStatus) }); }); }); 
 <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <form class="my_form_class"> First name:<br> <input type="text" name="firstname" value="name"><br> Last name:<br> <input type="text" name="lastname" value="surname"> </form> <button id="btn">Submit Form with Ajax</button>
+3
source

Form data can be serialized, and data can be sent as a string :) I have not tested this, but it should work :)

 jQuery.ajax({ type:"GET", url: "/wp-admin/admin-ajax.php", data: $('.my_form_class').serialize() + "&security=foo", context: this, success:function(data){ // do stuff } });
+6
source

Use FormData and loop your data object and add it as

 var fd = new FormData(); fd.append('key', value); 

 $(function(){ $('#btn').on('click',function(){ var value = 'abc'; var fd = new FormData(); var my_form_data = { fname: $('#firstname').val(), lname: $('#lastname').val() }; for (var key in my_form_data) { if (my_form_data.hasOwnProperty(key)) { fd.append(key, my_form_data[key]); } } fd.append('value', value); console.log(fd); jQuery.ajax({ type:"GET", url: "/wp-admin/admin-ajax.php", data: fd, context: this, success:function(data){ // do stuff } }); }) }) 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form class="form_data"> First name:<br> <input type="text" id="firstname"><br> Last name:<br> <input type="text" id="lastname"> </form> <button id="btn">Submit</button>

Another method involves using .serialize() . It can be used when you need data in the query string as

 var data = $('.my_form_data').serialize(); data += '&security=foo';

Ajax

 jQuery.ajax({ type:"GET", url: "/wp-admin/admin-ajax.php", data: data, context: this, success:function(data){ // do stuff } });
+1
source

More articles:


All Articles