如何使用jQuery的$.ajax()传递多个JSON对象作为数据

本文的目的是在一个HTML文档中使用jQuery $ajax()方法传递多个JSON对象作为数据。

方法：在一个HTML文档中创建一个按钮，向PHP服务器发送JSON对象。在JavaScript文件中，为该按钮添加一个点击事件监听器。在点击按钮时，使用jQuery $ajax()方法向PHP文件发出请求，多个JSON对象被传递到服务器。

HTML代码：下面的代码展示了用户界面的设计或结构。在点击HTML按钮时，它在resultID HTML div中给出了PHP服务器的响应。

<!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代码：以下代码是上述HTML代码中使用的 “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代码：下面的代码是上述HTML代码中使用的 “script.js “文件的内容。它通过使用jQuery ajax()方法处理按钮的click()事件，并将数据传递给PHP服务器文件，即action.php。

$(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);
        }
    })
  });
});

注意：你可以通过使用逗号(,)分隔的值传递尽可能多的JSON对象，即obj1, obj2, obj3,。

PHP代码：以下是上述JavaScript代码中使用的 “action.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";
}
?>