首頁 > 後端開發 > PHP問題 > php頁面不刷新更新數據

php頁面不刷新更新數據

angryTom
發布: 2023-02-28 07:38:01
原創
5570 人瀏覽過

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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板