jQuery Ajax 實現不刷新頁面提交資料 (後端使用 PHP 處理回傳 json)

3 個月前 |

本篇文章交教您如何使用 jQuery Ajax 提交表單資料達到不刷新頁面的需求!

  介紹 

首先我們先來了解什麼是 Ajax,AJAX 即「Asynchronous JavaScript and XML」 (非同步的JavaScript與XML技術),指的是一套綜合了多項技術的瀏覽器端網頁開發技術。

傳統的 Web 應用允許用戶端填寫表單 (form),當送出表單時就向網頁伺服器傳送一個請求,伺服器接收並處理傳來的表單,然後送回一個新的網頁,但這個做法浪費了許多頻寬,因為在前後兩個頁面中的大部分HTML碼往往是相同的,由於每次應用的溝通都需要向伺服器傳送請求,應用的回應時間依賴於伺服器的回應時間,這導致了使用者介面的回應比本機應用慢得多。

與此不同,AJAX 應用可以僅向伺服器傳送並取回必須的資料,並在用戶端採用 JavaScript 處理來自伺服器的回應,因為在伺服器和瀏覽器之間交換的資料大量減少,伺服器回應更快了,同時很多的處理工作可以在發出請求的用戶端機器上完成,因此 Web 伺服器的負荷也減少了。

類似於 DHTML 或 LAMP,AJAX 不是指一種單一的技術,而是有機地利用了一系列相關的技術,雖然其名稱包含 XML,但實際上資料格式可以由 JSON 代替,進一步減少資料量,形成所謂的 AJAJ,而用戶端與伺服器也並不需要異步。

資料來源:https://zh.wikipedia.org/wiki/AJAX

  教學 

本篇教學使用 jQuery,記得要引入喔!

首先我們先建立一個表單,範例程式碼如下

Ajax 傳送的資料是讀取表單欄位的 ID 取得使用者輸入的資料。

jQuery Ajax 範例程式碼如下

上方範例程式碼使用 jQuery 編寫,如果不想使用 jQuery 也可以改寫成 JavaScript!

上方範例程式都有註解,我就不多解釋了。

接下來為後端 PHP 範例程式碼

首先我們要將資料類型設定為 json,這是跟 JavaScript 溝通的方式,使用  header('Content-Type: application/json; charset=UTF-8'); 。

然後判斷請求是否為 POST,使用  if ($_SERVER['REQUEST_METHOD'] == "POST") 。

接下來就可以寫入驗證資料的方式了,本篇教學只簡單判斷資料是否輸入完全。

完整的範例程式碼如下

index.php

service.php

 

範例網頁
https://demo.reh.tw/jquery_ajax_post/

GitHub
https://github.com/GoneTone/jquery-ajax-post-demo


jQuery Ajax 實現不刷新頁面提交資料 (後端使用 PHP 處理回傳 json) - QR Code
本站內容未經授權許可請勿擅自抄襲
如果需引用部分文章內容請註明來源網址

發表時間:2018-06-18 22:45:25
此文章網址:https://blog.reh.tw/archives/662
關於作者
張文相 Zhang Wenxiang 的頭像

張文相 Zhang Wenxiang

我是本站的站長,喜歡 Coding 的一位學生。

張文相 Zhang Wenxiang

我是本站的站長,喜歡 Coding 的一位學生。


分類:教學 程式
標籤:Ajax HTML JavaScript jQuery json PHP



Facebook 留言