📌  相关文章
📜  如何使用 jQuery 的 $.ajax() 将多个 JSON 对象作为数据传递?

📅  最后修改于: 2021-11-24 05:33:45             🧑  作者: Mango

本文的目的是在 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         

                          
        
     
     
  


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;
}


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


PHP


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 代码中使用。

PHP


输出 :

多个数据传递和获取响应