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相關知識，請造訪PHP中文網！

以上是php頁面不刷新更新數據的詳細內容。更多資訊請關注PHP中文網其他相關文章！