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
– Jonathan M, Commented Apr 9, 2012 at 18:49

Jasper · Accepted Answer · 2012-04-09 18:48:44Z

110

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 9, 2012 at 18:48

Jasper

76.1k14 gold badges153 silver badges148 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Saeed Ansari Over a year ago

'id='+ id & 'name='+ name should be changed to 'id='+ id+'&name='+ name

Jasper Over a year ago

@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.

Pradeep · Accepted Answer · 2018-06-02 08:35:16Z

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 2, 2018 at 8:35

Pradeep

9,70713 gold badges29 silver badges34 bronze badges

answered Apr 9, 2012 at 18:50

Selvakumar Arumugam

79.9k15 gold badges123 silver badges139 bronze badges

Comments

Ayush · Accepted Answer · 2012-04-09 18:48:27Z

6

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

The ampersand needs to be quoted as well:

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

answered Apr 9, 2012 at 18:48

Ayush

42.5k52 gold badges169 silver badges243 bronze badges

3 Comments

JAAulde Over a year ago

+1 as this is the crux of the issue, although I would use the data object suggested in Jasper's answer.

sohaan Over a year ago

this worked bt i think &(ampersand) in data makes code hard to understand soln given by @SKS is good

Ayush Over a year ago

@sohaan: Yes, a Javascript object is a better solution.

Simon Steinberger · Accepted Answer · 2012-04-09 18:51:14Z

6

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

data = {id: id, name: name}

answered Apr 9, 2012 at 18:51

Simon Steinberger

6,8565 gold badges63 silver badges101 bronze badges

Comments

Chad · Accepted Answer · 2014-08-26 21:43:17Z

6

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.

answered Aug 26, 2014 at 21:43

Chad

6942 gold badges11 silver badges22 bronze badges

Comments

hadi.sh · Accepted Answer · 2013-10-13 18:51:21Z

5

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

answered Oct 13, 2013 at 18:51

hadi.sh

1291 silver badge4 bronze badges

Comments

Basheer AL-MOMANI · Accepted Answer · 2016-09-04 15:07:12Z

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) {},

Badshah Sahib · Accepted Answer · 2015-04-21 11:16:38Z

0

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

answered Apr 21, 2015 at 11:16

Badshah Sahib

1842 silver badges11 bronze badges

Comments

Chamina Sathsindu · Accepted Answer · 2017-05-24 06:42:52Z

-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, 2017 at 6:42

Chamina Sathsindu

5284 silver badges15 bronze badges

Collectives™ on Stack Overflow

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

9 Answers 9

2 Comments

Comments

3 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

2 Comments

Comments

3 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Related