how to send multiple data with $.ajax() jquery

Question

i am trying to send multiple data using j query $.ajax method to my php script but i can pass only single data when i concatenate multiple data i get undefined index error in my php script tat means the ajax request is made but data is not sent i need to know how should i format multiple data to successively send it to processing script in name vale pair here is what i have written

<script>
  $(document).ready(function() {

    $('#add').click(function () {

      var name = $('#add').attr("data_id");

      var id = $('#add').attr("uid");

      var data = 'id='+ id  & 'name='+ name; // this where i add multiple data using  ' & '

      $.ajax({
        type:"GET",
        cache:false,
        url:"welcome.php",
        data:data,    // multiple data sent using ajax
        success: function (html) {

          $('#add').val('data sent sent');
          $('#msg').html(html);
        }
      });
      return false;
    });
  });
</script>



<span>
  <input type="button" class="gray_button" value="send data" id="add" data_id="1234" uid="4567" />
</span>
<span id="msg"></span>

I usually just put related items in an object (or leave them in their original object), convert the whole object to a JSON string, and send the JSON string in a parm. On the server side, I have php convert the JSON string back to an object, and voila, I'm in business. — Jonathan M, Apr 09 '12 at 18:49

score 109 · Accepted Answer · answered Apr 09 '12 at 18:48

109

You can create an object of key/value pairs and jQuery will do the rest for you:

$.ajax({
    ...
    data : { foo : 'bar', bar : 'foo' },
    ...
});

This way the data will be properly encoded automatically. If you do want to concoct you own string then make sure to use encodeURIComponent(): https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/encodeURIComponent

Your current code is not working because the string is not concocted properly:

'id='+ id  & 'name='+ name

should be:

'id='+ encodeURIComponent(id) + '&name='+ encodeURIComponent(name)

answered Apr 09 '12 at 18:48

Jasper

75,717
14
151
146

'id='+ id & 'name='+ name should be changed to 'id='+ id+'&name='+ name – Saeed Ansari Sep 04 '16 at 11:21
1

@SaeedAnsari In addition to that, it's a really good idea to sanitize your variables with `encodeURIComponent` as in the example in the answer. No reason not to protect against XSS attacks. – Jasper Sep 06 '16 at 15:49

score 9 · Answer 2 · edited Jun 02 '18 at 08:35

9

Change var data = 'id='+ id & 'name='+ name; as below,

use this instead.....

var data = "id="+ id + "&name=" + name;

this will going to work fine:)

edited Jun 02 '18 at 08:35

Pradeep

9,667
13
27
34

answered Apr 09 '12 at 18:50

Selvakumar Arumugam

79,297
15
120
134

score 6 · Answer 3 · answered Apr 09 '12 at 18:48

6

var data = 'id='+ id  & 'name='+ name;

The ampersand needs to be quoted as well:

var data = 'id='+ id  + '&name='+ name;

answered Apr 09 '12 at 18:48

Ayush

41,754
51
164
239

+1 as this is the crux of the issue, although I would use the data object suggested in Jasper's answer. – JAAulde Apr 09 '12 at 18:53
this worked bt i think &(ampersand) in data makes code hard to understand soln given by @SKS is good – sohaan Apr 09 '12 at 19:03
@sohaan: Yes, a Javascript object is a better solution. – Ayush Apr 09 '12 at 19:04

score 6 · Answer 4 · answered Apr 09 '12 at 18:51

6

I would recommend using a hash instead of a param string:

data = {id: id, name: name}

answered Apr 09 '12 at 18:51

Simon Steinberger

6,605
5
55
97

score 6 · Answer 5 · answered Aug 26 '14 at 21:43

var my_arr = new Array(listingID, site_click, browser, dimension);
    var AjaxURL = 'http://example.com';
    var jsonString = JSON.stringify(my_arr);
    $.ajax({
        type: "POST",
        url: AjaxURL,
        data: {data: jsonString},
        success: function(result) {
            window.console.log('Successful');
        }
    });

This has been working for me for quite some time.

score 5 · Answer 6 · answered Oct 13 '13 at 18:51

5

var value1=$("id1").val();
var value2=$("id2").val();
data:"{'data1':'"+value1+"','data2':'"+value2+"'}"

answered Oct 13 '13 at 18:51

hadi.sh

129
1
4

score 2 · Answer 7 · answered Sep 04 '16 at 15:07

you can use FormData

take look at my snippet from MVC

var fd = new FormData();
fd.append("ProfilePicture", $("#mydropzone")[0].files[0]);// getting value from form feleds 
d.append("id", @(((User) Session["User"]).ID));// getting value from session

$.ajax({
    url: '@Url.Action("ChangeUserPicture", "User")',
    dataType: "json",
    data: fd,//here is your data
    processData: false,
    contentType: false,
    type: 'post',
    success: function(data) {},

score 0 · Answer 8 · answered Apr 21 '15 at 11:16

0

var CommentData= "u_id=" + $(this).attr("u_id") + "&post_id=" + $(this).attr("p_id") + "&comment=" + $(this).val();

answered Apr 21 '15 at 11:16

Badshah Sahib

184
2
11

score -1 · Answer 9 · answered May 24 '17 at 06:42

-1

  var value1=$("id1").val();
  var value2=$("id2").val();
    data:"{'data1':'"+value1+"','data2':'"+value2+"'}"

You can use this way to pass data

answered May 24 '17 at 06:42

chamina

498
3
15

how to send multiple data with $.ajax() jquery

9 Answers9

Linked

Related