Ajax請求後臺資料

浪裡行舟發表於2018-06-10

本文框架圖

一、前期準備

安裝好XAMPP軟體，並執行起來。本文程式碼是基於XAMPP開發環境，XAMPP是完全免費且易於安裝的Apache發行版，其中包含MariaDB、PHP和Perl。XAMPP開放原始碼包的設定讓安裝和使用出奇容易。

二、前後臺資料互動

前臺部分 其中“process.php?name=Herry”，向後臺傳遞name資料

 document.getElementById("button").addEventListener("click",function () {
        var xhr = new XMLHttpRequest();
        xhr.open("GET","process.php?name=Herry",true);
        xhr.onreadystatechange=function () {
            if(xhr.readyState==4&&xhr.status==200) {
                var data = xhr.responseText;
                console.log(data)
            }
        };
        xhr.send();
    })
複製程式碼

後臺PHP部分 後臺接收了name數值，並向前臺返回了"GET: 你的名字是". $_GET['name']

<?php 
   	if (isset($_GET['name'])) {
   		echo "GET: 你的名字是". $_GET['name'];
   	}
?>
複製程式碼

於是最後前臺console裡面得到：GET: 你的名字是Herry

三、正常表單提交到PHP與Ajax方式提交

正常表單GET提交資料到PHP

前臺部分

<form action="process.php" method="GET">
    <input type="text" name="name">
    <input type="submit" value="提交">
</form>
複製程式碼

後臺PHP部分

<?php
   	if (isset($_GET['name'])) {
   		echo "GET: 你的名字是". $_GET['name'];
   	}
?>
複製程式碼

表單輸入名字Bucky，然後點選提交後，瀏覽器將資料打包後，傳遞給後臺,最後後臺返回我們想要的資料----GET: 你的名字是Bucky。整個過程中頁面有重新整理，資料點選提交後，頁面跳轉到這個網址http://localhost/ajax/process.php?name=Bucky

Ajax請求後臺資料GET

Ajax非同步請求資料，無需重新整理頁面。可以提高使用者體驗，較少網路資料的傳輸量。click事件改成submit事件（表單應該用submit事件），然後取消預設事件。

前臺部分

//Html部分
<form id="getForm">
    <input type="text"name="name" id="name1">
    <input type="submit"value="提交">
</form>
//Javascript部分
 document.getElementById("getForm").addEventListener("submit",function(e){
        e.preventDefault();//阻止預設跳轉事件
        var name=document.getElementById("name1").value;//獲取輸入的值
        var xhr = new XMLHttpRequest();
        xhr.open("GET","process.php?name="+name,true);
        xhr.onreadystatechange=function () {
            if (  xhr.status == 200&&xhr.readyState == 4) {
                var data = xhr.responseText;
                console.log(data);
            }
        }
            xhr.send();
    })
複製程式碼

後臺PHP部分

<?php
   	if (isset($_GET['name'])) {
   		echo "GET: 你的名字是". $_GET['name'];
   	}
?>
複製程式碼

在表單輸入Bucky，點選提交，最後在console顯示：GET: 你的名字是Bucky。整個過程頁面無重新整理，有效提高頁面效能。

正常表單POST提交資料到PHP

與GET提交資料差不多 前臺部分

<form action="process.php" method="POST">
    <input type="text" name="name">
    <input type="submit" value="提交">
</form>
複製程式碼

後臺PHP部分

<?php
   	if (isset($_POST['name'])) {
       	echo "POST: 你的名字是". $_POST['name'];
       	}
?>
複製程式碼

表單輸入名字Bucky，然後點選提交後，瀏覽器將資料打包後，傳遞給後臺,最後後臺返回我們想要的資料----POST: 你的名字是Bucky。整個過程中頁面有重新整理，資料點選提交後，頁面跳轉到這個網址http://localhost/ajax/process.php。與GET方式提交不同的是，POST方法資料並沒有內嵌在url中，這樣安全性比較高。

Ajax請求後臺資料POST

POST請求與GET主要有兩點不同：

①post請求一定要設定請求頭的格式內容：

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");  
複製程式碼

②post請求引數放在send裡面，即請求體

xhr.send("name="+name" );  
複製程式碼

前臺部分

//HTML部分
<form id="postForm">
    <input type="text"name="name" id="name2">
    <input type="submit"value="提交">
</form>
//Javascript部分
  document.getElementById("postForm").addEventListener("submit", function (e) {
        e.preventDefault();
        var name=document.getElementById("name2").value;
        var params = "name="+name;
        var xhr = new XMLHttpRequest();
        xhr.open("POST","process.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;
                console.log(data);
            }
        };
        xhr.send(params);
    })
複製程式碼

後臺PHP部分

<?php
     if (isset($_POST['name'])) {
        echo "POST: 你的名字是". $_POST['name'];
        }
?>
複製程式碼

表單輸入名字Bucky，然後點選提交後，最後在console顯示：POST: 你的名字是Bucky。整個過程頁面無重新整理。

四、總結

1.在不需要重新重新整理頁面的情況下，Ajax 通過非同步請求載入後臺資料，提高使用者體驗和頁面效能。 2.GET引數通過URL傳遞，POST放在Request body中，後者安全性比較高。

相關文章