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

声明：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 "你输入的名字为：".$json;
?>

效果图演示：
这里写图片描述

当传输一个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;
?>

效果图演示：
这里写图片描述

总结

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

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

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

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

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

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

当传输一个参数时

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

总结

猜你喜欢