DEV Community

pakainfo
pakainfo

Posted on

how to send multiple data in jquery ajax post?

how to send multiple values using ajax in javascript? - Data can be sent through JSON or via normal POST. We are sending an ajax request to a php server side file as shown here:

how to send multiple values using ajax in javascript?

Generally people face issues with jQuery AJAX POST call to WebMethod when multiple parameters have to be passed, due to syntax errors the WebMethod does not get called.

The simple Example is:


data: {is_active: true, product: name},

Enter fullscreen mode Exit fullscreen mode

Learn Advanced programming Level : how to send multiple values using ajax in javascript

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

You can make an object of key/value pairs as well as jQuery will do the rest for you:


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

Enter fullscreen mode Exit fullscreen mode

In Such cases in your web development you want to required to insert multiple data in your single form submission. At that time if you have follow simple HTML form submission with PHP script then you are able to send only single data to server. For Sending or inserting or saving multiple data in single click then you have to use Jquery and javascript code. By using Jquery or Javascript code you can generate dynamic HTML field in your HTML form. We can generate any dynamic HTML field by using Jquery and append into your form fields. We can dynamically generate same name HTML field by using Javascript and append into our HTML form.

In MVC application, we use multiple Models based on the requirement of our application. We can pass as many Models from Controller to View as we want. At the same time, we can pass many Model values from View to Model. This article explains how to pass multiple model values from View to Controller, using jQuery with the help of AJAX.

Send multiple data with ajax in PHP

Data can be sent through JSON or via normal POST. Following JavaScript Tutorialsis an example showing data sent through JSON −


var is_active = 1;
var status = 2;
var product = 3;
$.ajax({
   type: "POST",
   contentType: "application/json; charset=utf-8",
   url: "your_url_goes_here",
   data: { data_1: is_active, data_2: status, data_3: product },
   success: function (result) {
      // perform operations here
   }
});

Enter fullscreen mode Exit fullscreen mode

With normal post, the below code can be used −


$.ajax({
   type: "POST",
   url: $('form').attr("action"),
   data: $('#form0').serialize(),
   success: function (result) {
      // perform operations here
   }
});

Enter fullscreen mode Exit fullscreen mode

An alternate to the above code has been demonstrated below −


data:'id='+ID & 'member_code=' + MEMBERCODE,
with:
data: {id:ID, member_code:MEMBERCODE}
so your code will look like this :
$(document).ready(function(){
   $(document).on('click','.show_more',function(){
      var ID = 10;
      var MEMBERCODE =1;
      $('.show_more').hide();
      $('.loding').show();
      $.ajax({
         type:'POST',
         url:'/loadData.php',
         data: {id:ID, member_code:MEMBERCODE},
         success:function(html){
            $('#result_name'+ID).remove();
            $('.post_list').append(html);
         }
      });
   });
});


Enter fullscreen mode Exit fullscreen mode

send multiple data using ajax

here simple Example, you will learn to ajax send multiple data to php

index.html


$.ajax({
    url: "/pakainfo_api",
    type: "GET",
    data: {p1: "value1", p2: "value2"}, // multiple data we want to send
    success: function(data){ 
        console.log(data);
    }
}).done(function(){
    console.log("Success.");
}).fail(function(){
    console.log("An error has occurred.");
}).always(function(){
    console.log("Complete.");
});

Enter fullscreen mode Exit fullscreen mode

Example : 1 how to send multiple array in ajax?


$.ajax({
    url: "/pakainfo_api",
    type: "GET",
    data: {p1: ["v1", "v2"], p2: ["v1", "v2"]}, // multiple array we want to send
    success: function(data){ 
        console.log(data);
    }
}).done(function(){
    console.log("Success.");
}).fail(function(){
    console.log("An error has occurred.");
}).always(function(){
    console.log("Complete.");
});

Enter fullscreen mode Exit fullscreen mode

Here in this case also we have use Jquery and Jquery UI. By using Jquery UI Dialog box we have get data from user and by using Jquery code we have converted that form data into HTML table and data has been stored in hidden field in array format. Here we can add multiple number of data and store into HTML table format. Now for submit multiple form data to PHP server script we have use Ajax web development request. By using Ajax we have send multiple form data to PHP script and in PHP we have insert multiple form data. So, Here we have insert multiple form data in single click of form submission. This is new challenge in Web Development with JQuery Ajax PHP. So, if you have developed any web application development and in that you want to add multiple data in single form submission then you can get reference from this PHP JQuery Ajax Web Development Code.

We hope it can help you...

Top comments (0)