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

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

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

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

index.html

  

    
  
    
  
    
    
  
    
    
    
  
    
    

  

     
     GeeksforGeeks
     
        Pass multiple JSON objects
        
        
        
            Click on me!
        
        
        
     
     

  

CSS 代码：以下代码是上述 HTML 代码中使用的文件“style.css”的内容。

样式，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

脚本.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);
        }
    })
  });
});

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

PHP代码：以下是文件“action.php”的代码。 PHP”在上述 JavaScript 代码中使用。

输出 ：

多个数据传递和获取响应