1、環(huán)境

安裝wampserver軟件，并運行起來，其中包含PHP、Apache以及MySQL的集成開發(fā)環(huán)境

2、前后端交互

2.1目錄結(jié)構(gòu)

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

2.2 get方式

2.2.1點擊獲取請求，從js.php獲取數(shù)據(jù)

從前端代碼中向后端傳遞name=“Herry”,后端接受該參數(shù)，然后返回獲取到的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、 正常表單提交數(shù)據(jù)，頁面跳轉(zhuǎn)到j(luò)s.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、正常表單提交數(shù)據(jù)，頁面不跳轉(zhuǎn)，在div中顯示請求數(shù)據(jù)

前端代碼(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的返回內(nèi)容，整個過程頁面無刷新，有效提高頁面性能

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請求后臺數(shù)據(jù)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請求一定要設(shè)置請求頭的格式內(nèi)容：
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
2、②post請求參數(shù)放在send里面，即請求體
xhr.send("name="+name" );

總結(jié)

在不需要重新刷新頁面的情況下，Ajax 通過異步請求加載后臺數(shù)據(jù)，提高用戶體驗和頁面性能。 2.GET參數(shù)通過URL傳遞，POST放在Request body中，后者安全性比較高
本文參考：https://juejin.im/post/5b1cea356fb9a01e713592c5