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

小咪咪 2023-07-12 05:28 15阅读 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：

<?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：

<?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]: https://img-blog.csdn.net/20180525114435553?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM0NTExNTc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: https://img-blog.csdn.net/20180525114807643?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM0NTExNTc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70