Sending multiple data parameters with jQuery AJAX

Question

I am sending an ajax request to a php file as shown here:

function checkDB(code, userid)
{

  $.ajax({
  type: "POST",
  url: "<?php bloginfo('template_url'); ?>/profile/check_code.php",
  data: 'code='+code+'userid='+userid,
  datatype: "html",
  success: function(result){

       if(result == 0)
        {
            $('#success').html( code + ' has been redeemed!');
            // alert('success');//testing purposes
        }
        else if(result == 2)
        {
            $('#err').html(  code + ' already exists and has already been redeemed....');
            //alert('fail');//testing purposes
        }else if(result == 1){
            $('#err').html(  code + ' redeem code doesnt exist');      
        }

        alert(result);      
      }
  })

}

This is sent calling the function on submit, like so:

<form method="post" class="sc_ajaxxx" id="sc_add_voucherx" name="sc_ajax"  
     onsubmit="checkDB(document.sc_ajax.sc_voucher_code.value, <?php echo $user_id ?>); return false;">
</form>

The problem is that the user id php variable is not getting sent to the check_code.php page by ajax. or at least I cant seem to echo the id back to the page.

Is this the correct way of passing multiple values to a server-side page? Without the userid passing over, it works fine just passing over the code.

Thanks guys :)

Linus Thiel · Accepted Answer · 2013-11-23 09:33:05Z

134

Here is how POST data should be formatted:

key1=value1&key2=value2&key3=value3

In your case (note the & as a separator):

'code=' + code + '&userid=' + userid

But jQuery does that for you if you specify your data as an object:

data: { code: code, userid: userid }

edited Nov 23, 2013 at 9:33

answered Feb 17, 2012 at 13:07

Linus Thiel

39.3k9 gold badges112 silver badges104 bronze badges

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

10 Comments

JamesG Over a year ago

Ok thanks. How would I specify it as an object? Would this be datatype: json?

Linus Thiel Over a year ago

Nope, you don't need to change your dataType - that's a hint to jQuery how it should interpret your response. The data it sends is by default serialized as post data, e.g. code=17&userid=42. You just need to change your data string into what I wrote above and it will work.

JamesG Over a year ago

Ok that makes sense... but why woiuld you want to set your dataType to JSON then? To read in JSON specifically?

Linus Thiel Over a year ago

Normally you don't need to specify a dataType, jQuery will figure it out based on response headers etc. In cases where it can't, and you expect it to receive e.g. JSON back, it makes sense. See jQuery.ajax documentation.

a coder Over a year ago

I like the object method because it is easier to read and looks clean.

|

Camille Hodoul · Accepted Answer · 2012-02-17 13:09:57Z

15

you should set your data like so :

data: 'code='+code+'&userid='+userid

answered Feb 17, 2012 at 13:09

Camille Hodoul

3862 silver badges13 bronze badges

Comments

Poonam · Accepted Answer · 2012-02-17 13:09:58Z

4

you can try this :

data: 'code='+code+'&userid='+userid,

instead of

data: 'code='+code+'userid='+userid,

answered Feb 17, 2012 at 13:09

Poonam

4,6411 gold badge17 silver badges20 bronze badges

Comments

break7533 · Accepted Answer · 2017-01-30 15:29:40Z

3

usually sending your data like this helps:

data: { code: code, userid: userid }

the most important thing to not forget is to verify if the name of the variables you are sending are the same in the server side

answered Jan 30, 2017 at 15:29

break7533

1482 silver badges10 bronze badges

Comments

Sanopotens · Accepted Answer · 2019-05-08 12:27:31Z

1

The answer from Linus Gustav Larsson Thiel refers, I used the following &.ajax() that triggers when a button is clicked and it works great. I could pass day, month and year parameters.

$('#convertbtn').on('click',function(){
ageddajax = $("#agedd").val();
agedmmajax = $("#agemm").val();
ageyyyyajax = $("#ageyyyy").val();
    if(ageddajax > 0 && agemmajax > 0 && ageyyyyajax >0){
    $.ajax({
        type:'POST',
        url:'ajaxDataAge.php',
        data:'agedd_id='+ageddajax +'&agemm_id='+agemmajax +'&ageyyyy_id='+ageyyyyajax,
            success:function(html){
            $('#cydivage').html(html);
            }
        });
    }   
});

edited May 8, 2019 at 12:27

answered May 7, 2019 at 20:34

Sanopotens

114 bronze badges

Comments

Rowland Shaw · Accepted Answer · 2014-01-22 12:34:32Z

0

Try this code... it is working for me ...

<script type='text/javascript'>
$(document).ready(function(){
  $(".star").click(function(){
   var rate_value1= $(this).index(".star")+1;
    $.ajax({
    type: "POST",
    dataType: "json",
    url:  "<?php echo(rootpath()) ?>/vote.php",

data: { product_id: '<?php echo($product_id_to_permalink) ?>' , rate_value: rate_value1 }

        });
      });
    });
</script>

edited Jan 22, 2014 at 12:34

Rowland Shaw

38.2k15 gold badges104 silver badges168 bronze badges

answered Jan 22, 2014 at 7:38

waheed zulfiqar

111 bronze badge

Comments

Dee_wab · Accepted Answer · 2017-02-15 09:34:51Z

0

 Try this code... 
    <script>
     function quote_ajax_table(){
       var doc_name = '<?php echo $test; ?>';
       var doc_no = '<?php echo $doc_no; ?>';

$.get('quote_ajax_table.php?doc_no='+doc_no+'&doc_name='+doc_name,function(data) {
   $('.dyna').html(data);
 });
}
</script>

//in html code 
  <div class="dyna"></div>

edited Feb 15, 2017 at 9:34

answered Feb 10, 2017 at 12:27

Dee_wab

1,1631 gold badge10 silver badges23 bronze badges

Collectives™ on Stack Overflow

Sending multiple data parameters with jQuery AJAX

7 Answers 7

10 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

10 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related