How to pass multiple JSON Objects as data using jQuery's $.ajax() ? - GeeksforGeeks

30 Apr, 2021
The purpose of this article is to pass multiple JSON objects as data using the jQuery $ajax() method in an HTML document.
Approach: Create a button in an HTML document to send JSON objects to a PHP server. In the JavaScript file, add a click event listener to the button. On clicking of the button, a request is made to PHP file using jQuery $ajax() method by which multiple JSON objects are passed to the server. 
HTML Code: The following code demonstrates the design or structure of the user interface. On click of the HTML button, it gives the response by the PHP server in the resultID HTML div.
index.html
<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8">      <meta name="viewport"           content="width=device-width, initial-scale=1.0">      <!-- CSS file -->    <link rel="stylesheet" href="style.css">      <!-- jQuery Ajax CDN -->    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">    </script>      <!-- JavaScript file -->    <script src="script.js"></script></head>  <body>     <center>     <h2 style="color:green">GeeksforGeeks</h2>     <div class="container">        <b>Pass multiple JSON objects</b>        <br/><br/>        <!-- Button to multiple JSON objects -->        <button type="button" id="btn">            Click on me!        </button>        <div style="height:10px"></div>        <div id="resultID"></div>     </div>     </center></body>  </html>
CSS Code: The following code is the content for the file “style.css” used in the above HTML code.
Style,css
.container {  border: 1px solid rgb(73, 72, 72);  border-radius: 10px;  margin: auto;  padding: 10px;  text-align: center;}  button {  border-radius: 5px;  padding: 10px;  color: #fff;  background-color: #167deb;  border-color: #0062cc;  font-weight: bolder;  cursor: pointer;}  button:hover {  text-decoration: none;  background-color: #0069d9;  border-color: #0062cc;}
JavaScript Code: The following code is the content for the file “script.js” used in the above HTML code. It handles the click() event for the button by using jQuery ajax() method and passing the data to a PHP server file i.e action.php
script.js
$(document).ready(() => {        // Adding 'click' event listener to button  $("#btn").click(() => {            // Two JSON objects are passed to server        let obj1 = {"name": "John Doe"};    let obj2 = {"name": "Duke"};      // jQuery Ajax Post Request using $.ajax()    $.ajax({        url: 'action.php',        type: 'POST',        // passing JSON objects as comma(,) separated values        data: {            obj1,            obj2        },        success: (response) => {            // response from PHP back-end PHP server                     $("#resultID").show().html(response);        }    })  });});
Note: You can pass as many JSON objects by using comma(,) separated values i.e. obj1, obj2, obj3,..
PHP code: The following is the code for the file “action.php” used in the above JavaScript code.
PHP
<?php  // Check if JSON Objects are set by user   if (isset($_POST['obj1']) && $_POST['obj2']){  // Get JSON objects in variables   $obj1 = $_POST['obj1'];   $obj2 = $_POST['obj2'];      // Sending response to script file   echo "Success";}?>
Output :
multiple data passing and getting response
jQuery-AJAX
jQuery-Questions
JSON
Picked
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show and Hide div elements using radio buttons?
Scroll to the top of the page using JavaScript/jQuery
jQuery | children() with Examples
How to prevent Body from scrolling when a modal is opened using jQuery ?
How to redirect to a particular section of a page using HTML or jQuery?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?