後台錯誤資訊如何通過ajax傳到前台

2019-12-13 17:46:47

ajax提交資料的方法在很多網站都用到，它實現了不用重新整理當前頁面進行資料的處理。下面例子實現了在前台頁面提交姓名，在伺服器後端判斷輸入的姓名正確與否，把結果返回前台顯示的功能。

程式碼百度網路硬碟下載連結: https://pan.baidu.com/s/1N0RprDRR11Or0pY4Pav78g 提取碼: 5xus

新建一個前台html頁面，命名為test.html，用於製作提交的表單。在這個頁面需要jquery庫，利用jquery的ajax方法來提交資料到後台。

在test.html頁面中，編寫表單程式碼，一個姓名輸入框，一個提交按鈕，用於完成資料的提交。

在提交按鈕上加一個onclick的事件，執行一個handle函數，下面將在用這個函數實現ajax提交資料。

通過js物件獲得姓名輸入框的姓名，通過$.ajax({ })來向伺服器端傳遞資料。資料提交成功後，通過ajax的success方法，對伺服器端返回的資料進行彈窗提示（alert( )方法彈出伺服器端返回的資料）。

新建一個伺服器端檔案handel.php，用於處理前台ajax傳來資料。通過$_POST['username']接收前台傳來的姓名引數，並把它儲存在變數$username變數中。

在php中使用if語句對接收的姓名進行判斷，如果接收到的姓名是「小許」，則通過echo返回「姓名正確」資訊，如果接收到其他的資料，通過echo返回「姓名錯誤」資訊。

在瀏覽器執行test.html檔案，並在姓名輸入框提交不同的資料，測試ajax提交資料後，返回前台的資訊。

例如，下面輸入錯誤的姓名「小明」時，php伺服器端返回錯誤的資訊，在前台通過success方法裡alert彈出錯誤資訊。

當輸入正確的姓名「小許」，測試結果如下:

可見，已成功實現將後台的資訊傳遞給ajax，並成功顯示出來。