1、环境

安装wampserver软件，并运行起来，其中包含PHP、Apache以及MySQL的集成开发环境

2、前后端交互

2.1目录结构

---www
-----Ajax
-------index.html
-------js.php
-------test.js

2.2 get方式

2.2.1点击获取请求，从js.php获取数据

从前端代码中向后端传递name=“Herry”,后端接受该参数，然后返回获取到的name值
前端代码(index.html)

<button id="button">Get请求php</button>
<div id="div1" style="width: 300px;height: 150px;border: 1px solid red">请求js.php</div>
<script type="text/javascript">
        //get请求，请求js.php
        document.getElementById("button").addEventListener("click",function () {
            var xhr = new XMLHttpRequest();
            xhr.open("GET","js.php?name=Herry",true);
            xhr.onreadystatechange=function () {
                if(xhr.readyState==4&&xhr.status==200) {
                    var data = xhr.responseText;
                    $('#div1').html(data)
                }
            };
            xhr.send();
        })
</script>

后端代码(js.php)

if (isset($_GET['name'])) {
    echo "GET: 你的名字是". $_GET['name'];
}

效果图

image.png

点击按钮后

image.png

2.2.2、 正常表单提交数据，页面跳转到js.php

前端代码(index.html)

<form action="js.php" method="GET">
        <input type="text" name="data">
        <input type="submit" value="提交">
    </form>

后端代码(js.php)

if (isset($_GET['data'])) {
        echo "GET: 你的名字是". $_GET['data'];
    }

image.png

点击按钮后

image.png

2.2.3、正常表单提交数据，页面不跳转，在div中显示请求数据

前端代码(index.html)

<form id="getForm">
        <input type="text"name="data1" id="name1">
        <input type="submit"value="提交">
    </form>

后端代码(js.php)

if (isset($_GET['data1'])) {
    echo "GET: 你的名字是". $_GET['data1'];
    $output=exec('D:\app\node\node.exe test.js');
    $array=explode(',', $output);
    foreach ($array as $value) {
        echo "</br>".$value;
    }
    }

后端代码(test.js)

a='12,13,14,15,16'
console.log(a)

image.png

点击按钮后

微信截图_20191201130450.png

在表单输入1，点击提交，最后在div中显示：GET: 你的名字是1。以及请求test.js的返回内容，整个过程页面无刷新，有效提高页面性能

2.3 post方式

2.3.1

前端代码(index.html)

<form action="js.php" method="POST">
        <input type="text" name="data2">
        <input type="submit" value="提交">
    </form>

后端代码(js.php)

if (isset($_POST['data2'])) {
    echo "POST: 你的名字是". $_POST['data2'];
}

2.3.2

前端代码(index.html)

    <form id="postForm1">
        <input type="text" name="data3" id="data3">
        <input type="submit" value="提交">
    </form>
    <div id="div3" style="width: 300px;height: 150px;border: 1px solid red">Ajax请求后台数据post</div>
<script>
document.getElementById("postForm1").addEventListener("submit", function (e) {
        e.preventDefault();
        var name=document.getElementById("data3").value;
        var params = "data3="+name;
        var xhr = new XMLHttpRequest();
        xhr.open("POST","js.php",true);
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xhr.onreadystatechange=function () {
            if(xhr.readyState==4&&xhr.status==200) {
                var data = xhr.responseText;
                $('#div3').html(data)
            }
        };
        xhr.send(params);
    })
</script>

后端代码(js.php)

if (isset($_POST['data3'])) {
    echo "POST: 你的名字是". $_POST['data3'];
}

image.png

POST请求与GET主要有两点不同：

1、post请求一定要设置请求头的格式内容：
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
2、②post请求参数放在send里面，即请求体
xhr.send("name="+name" );

总结

在不需要重新刷新页面的情况下，Ajax 通过异步请求加载后台数据，提高用户体验和页面性能。 2.GET参数通过URL传递，POST放在Request body中，后者安全性比较高
本文参考：https://juejin.im/post/5b1cea356fb9a01e713592c5