如何使用 Javascript 将 JSON 对象发送到服务器？

JavaScript 对象表示法 (JSON)。它是一种轻量级的数据传输格式。人类和机器都非常容易理解。它通常用于从服务器发送数据或向服务器发送数据。如今，由于其优点和简单性，它被广泛用于API集成。
在本例中，我们将使用 AJAX（异步 JavaScript 和 XML）在后台发送数据。我们使用PHP作为后端。
前端：

• HTML：
  

在前端，我们将构建一个表单，它将姓名和电子邮件作为输入，并使用 javascript 将其转换为JSON对象并将其发送到服务器。
单击提交按钮后，将调用下面定义的sendJSON() 。

html

  
    
      JavaScript | Sending JSON data to server.
    
  
 
  
    
      GeeksForGeeks
    
 
    
        
        
        
         
        
        Send JSON
 
      
      
     
   
 
  
  
 
  

• JavaScript：
  向 Web 服务器发送数据时，数据必须是字符串。所以我们使用 JSON.stringify()函数将数据转换为字符串并通过XHR请求发送到服务器。下面是示例代码。
  

javascript

function sendJSON(){
              
            let result = document.querySelector('.result');
            let name = document.querySelector('#name');
            let email = document.querySelector('#email');
              
            // Creating a XHR object
            let xhr = new XMLHttpRequest();
            let url = "submit.php";
       
            // open a connection
            xhr.open("POST", url, true);
 
            // Set the request header i.e. which type of content you are sending
            xhr.setRequestHeader("Content-Type", "application/json");
 
            // Create a state change callback
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
 
                    // Print received data from server
                    result.innerHTML = this.responseText;
 
                }
            };
 
            // Converting JSON data to string
            var data = JSON.stringify({ "name": name.value, "email": email.value });
 
            // Sending data with the request
            xhr.send(data);
        }

• 后端：
  

我们使用PHP作为脚本语言。创建一个名为提交的文件。 PHP ，在这个文件中，我们将接收到的数据解码为 JSON 并返回使用接收到的数据形成的句子。

PHP

name, your email is $data->email";
 
?>

现在，当您填写详细信息并按下发送 JSON按钮时，您将看到如下内容：