如何使用 jQuery 向PHP发送动态键值对？

本文的目的是在 HTML 文档中使用 jQuery AJAX 将动态键值对发送到PHP后端。

在 HTML 文档中创建两个输入字段，即一个用于键，第二个用于值，以及一个按钮（用于发送键值对）。为字段和按钮分配一个唯一的 id。在 JavaScript 文件中，向按钮添加事件侦听器，即单击。单击按钮时，将使用 jQuery Ajax 向PHP文件发出请求。

HTML 代码：以下代码用于结构。

index.html

  

    
     
    
      
    
    
  
    
    
    
      
    
    

  

    
        Dynamic Key Value Pair
  
        
        
        
  
        
        
        
  
        
        
            Send Data
        
    

  

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

样式文件

.container {
  border: 1px solid rgb(73, 72, 72);
  border-radius: 10px;
  margin: auto;
  padding: 10px;
  text-align: center;
}
  
h1 {
  margin-top: 10px;
}
  
input[type="text"] {
  padding: 10px;
  border-radius: 5px;
  margin: 10px;
  font-family: "Times New Roman", Times, serif;
  font-size: larger;
}
  
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”文件的内容。

主文件

$(document).ready(() => {
  // Adding 'click' event listener to button
  $("#btn").click(() => {
    // Fetching key's input field data
    const key = $("#key").val();
  
    // Fetching values input field data
    const value = $("#value").val();
  
    // Initializing array of objects to 
    // store key-value pairs
    
    let data = {};
  
    // assigning key-value pair to data object
    data[key] = value;
  
    // jQuery Ajax Post Request
    $.post(
      "action.php",
      {
        data,
      },
      (response) => {
        // response from PHP back-end
        alert(`Response from sever side is: ${response}`);
      }
    );
  });
});

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

输出：

动态键值对