【PHP】如何处理Ajax通过POST传递过来的数据

- 日理万妓 2022-05-24 09:54 199阅读 0赞

声明：index.html 与 info.php 处于同一级目录

#### 当传输一个参数时 ####

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
    
        名字：<input type="text" id="name" name="name">
        <button type="button" onclick="load()">点击</button>
        <div id="myDiv"></div>
    
        <script> function load() { var name = document.getElementById("name").value; // 1.创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); // 2.请求行 xhr.open("POST", "./info.php"); // 3.请求头 xhr.setRequestHeader('Content-Type',' application/x-www-form-urlencoded'); // 4.设置数据 xhr.send("name="+name); // 5.监听服务器响应 xhr.onreadystatechange = function(){ if (xhr.readyState==4 && xhr.status==200){ document.getElementById("myDiv").innerHTML=xhr.responseText; } } } </script>
    
    </body>
    </html>

<?php header("Content-type:text/html;charset=utf-8"); $name= $_POST["name"]; echo "你输入的名字为：".$name; ?>

效果图演示：  
![这里写图片描述][70]

--------------------

#### 当传输一个JSON数据（多个参数）时 ####

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
    
        名字：<input type="text" id="name" name="name"><br>
        密码：<input type="password" id="password" name="password">
        <button type="button" onclick="load()">点击</button>
        <div id="myDiv"></div>
    
        <script> function load() { var name = document.getElementById("name").value; var password = document.getElementById("password").value; var data = { "name": name, "password": password } var data= JSON.stringify(data); // JSON对象序列化（把js对象序列化为JSON字符串>>stringify()） // 1.创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); // 2.请求行 xhr.open("POST", "./info.php"); // 3.请求头 xhr.setRequestHeader('Content-Type',' application/x-www-form-urlencoded'); // 4.设置数据 xhr.send("data="+data); // 5.监听服务器响应 xhr.onreadystatechange = function(){ if (xhr.readyState==4 && xhr.status==200){ document.getElementById("myDiv").innerHTML=xhr.responseText; } } } </script>
    
    </body>
    </html>

<?php
    
        header("Content-type:text/html;charset=utf-8");
    
        $json = $_POST["data"];
        $res = json_decode($json);
        echo "你输入的用户名为：".$res->name.'<br>';
        echo "你输入的密码为：".$res->password;
    ?>

效果图演示：  
![这里写图片描述][70 1]

--------------------

#### 总结 ####

> 通过上面例子我们已经知道向后台传递的是一个JSON形式的字符串

第一种方案：拼接JSON字符串（键值都得用双引号，最外层用单引号，格式严格，容易拼错）

var data = '{"name": "'+name+'", "password": "'+password+'"}';

第二种方案：将JSON对象序列化为JSON字符串（简洁明了）

var data = {
        "name": name,
        "password": password
    }
    var data= JSON.stringify(data);

[70]: /images/20220524/b4a7caf5d1dc4a5a9248d1b0be520d9a.png
[70 1]: /images/20220524/5aa7ef1ad5034a38acf89e86a406279f.png