php頁面不重新整理更新資料

php頁面不重新整理更新資料

php頁面不重新整理更新資料實現起來很簡單，我們可以使用前端的ajax技術。

ajax作用：ajax技術的目的是讓javascript傳送http請求，與後台通訊，獲取資料和資訊。實現前後端分離。ajax技術的原理是範例化xmlhttp物件，使用此物件與後台通訊。ajax通訊的過程不會影響後續javascript的執行，從而實現非同步。

在js裡面ajax主要解決的問題就是：不重新整理當前頁面，把某些資料傳遞給伺服器，把某些資料從伺服器拿回用戶端。

一、在html裡的五步走策略：

1.建立AJAX核心物件

ar xhr=new XMLHttpRequest();

2.新增預載入；指如果xhr物件的預備好的狀態發生了變化時，觸發函數。

xhr.addEventListener("load",loadHandler);

3.建立連線

xhr.open("GET","http://localhost/index.php?user=zhangsan");

建立連線裡引數問題，語法：

xhr.open("get", url, true);

備註：open() 方法中

第1個引數指請求的傳送方式，值為get或post。

第2個引數指請求的url路徑就是你寫的php檔案 的路徑，？後面是所攜帶get所要獲得的相關資訊。

第3個引數指請求是非同步還是同步，如果寫true表示非同步（預設true）， 寫false表示同步。

4.向伺服器發起請求

xhr.send();

語法：

xhr.send();

備註：如果是get方式傳送請求，send()命令中不用寫任何引數

傳遞的資料可以寫在url中，伺服器用$_GET[「引數名」]接收。

如果是post方式傳送請求，需要設定請求頭才能正確把資料傳遞給後端頁面。 我們這裡採用的是get方式，所以不用寫任何引數。

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 
xhr.send(「資料名1=資料值&資料名2=資料值」);

伺服器用$_POST[「引數名」]接收。

5.宣告預載入函數；接收響應

function loadHandler(){
   // 獲取並使用伺服器的響應
    console.log(xhr.response);
 
}

二· 在php檔案裡面

三步驟：

header("content-type:text/html;charset=utf-8");

設定字元編碼

header("Access-Control-Allow-Origin:*");

設定Access-Control-Allow-Origin來實現跨域存取（因為不同的域名預設不允許之間不可以相互通訊）

echo $_GET["user"]."今天心情很好";

所要交給前台的資料

四.實現存取：

將寫好的php檔案放入到phpStydy 的www的資料夾內，如下圖：

1.找到phpStyle的安裝目錄

2.開啟找到www資料夾

3.將你寫好的PHP檔案複製到www資料夾裡面去，如我剛寫的index.php檔案；

4.現在實現簡單的ajax的存取；

現在執行你的html程式碼：

此時就會實現頁面不重新整理，就可以存取php的資料了

以上就是php頁面不重新整理更新資料的詳細內容，更多請關注TW511.COM其它相關文章！