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

9 個月前 |

本篇文章交教您如何使用 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,記得要引入喔!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

<form id="demo">
    暱稱:<input type="text" id="nickname">
    性別:
    <select id="gender">
        <option value="">請選擇</option>
        <option value="男">男</option>
        <option value="女">女</option>
        <option value="其他">其他</option>
    </select>
    <button type="button" id="submitExample">執行範例</button>
</form>

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

jQuery Ajax 範例程式碼如下

$(document).ready(function() {
    $("#submitExample").click(function() { //ID 為 submitExample 的按鈕被點擊時
        $.ajax({
            type: "POST", //傳送方式
            url: "service.php", //傳送目的地
            dataType: "json", //資料格式
            data: { //傳送資料
                nickname: $("#nickname").val(), //表單欄位 ID nickname
                gender: $("#gender").val() //表單欄位 ID gender
            },
            success: function(data) {
                if (data.nickname) { //如果後端回傳 json 資料有 nickname
                    $("#demo")[0].reset(); //重設 ID 為 demo 的 form (表單)
                    $("#result").html('<font color="#007500">您的暱稱為「<font color="#0000ff">' + data.nickname + '</font>」,性別為「<font color="#0000ff">' + data.gender + '</font>」!</font>');
                } else { //否則讀取後端回傳 json 資料 errorMsg 顯示錯誤訊息
                    $("#demo")[0].reset(); //重設 ID 為 demo 的 form (表單)
                    $("#result").html('<font color="#ff0000">' + data.errorMsg + '</font>');
                }
            },
            error: function(jqXHR) {
                $("#demo")[0].reset(); //重設 ID 為 demo 的 form (表單)
                $("#result").html('<font color="#ff0000">發生錯誤:' + jqXHR.status + '</font>');
            }
        })
    })        
});

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

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

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

header('Content-Type: application/json; charset=UTF-8'); //設定資料類型為 json,編碼 utf-8

if ($_SERVER['REQUEST_METHOD'] == "POST") { //如果是 POST 請求
    @$nickname = $_POST["nickname"]; //取得 nickname POST 值
    @$gender = $_POST["gender"]; //取得 gender POST 值
    if ($nickname != null && $gender != null) { //如果 nickname 和 gender 都有填寫
        //回傳 nickname 和 gender json 資料
        echo json_encode(array(
            'nickname' => $nickname,
            'gender' => $gender
        ));
    } else {
        //回傳 errorMsg json 資料
        echo json_encode(array(
            'errorMsg' => '資料未輸入完全!'
        ));
    }
} else {
    //回傳 errorMsg json 資料
    echo json_encode(array(
        'errorMsg' => '請求無效,只允許 POST 方式訪問!'
    ));
}

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

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

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

完整的範例程式碼如下

index.php

<!--
    旋風之音 GoneTone
    https://blog.reh.tw/

    範例教學
    
jQuery Ajax 實現不刷新頁面提交資料 (後端使用 PHP 處理回傳 json)
--> <!DOCTYPE html> <html> <head> <title>jQuery Ajax 實現不刷新頁面提交資料 Demo (後端使用 PHP 處理回傳 json)</title> </head> <body> <h1>jQuery Ajax 實現不刷新頁面提交資料 Demo (後端使用 PHP 處理回傳 json)</h1> <h2>教學文章:<a href="https://blog.reh.tw/archives/662" target="_blank">https://blog.reh.tw/archives/662</a></h2> <hr><br> <form id="demo"> 暱稱:<input type="text" id="nickname"> 性別: <select id="gender"> <option value="">請選擇</option> <option value="男">男</option> <option value="女">女</option> <option value="其他">其他</option> </select> <button type="button" id="submitExample">執行範例</button> </form> <br><hr> <p id="result"></p> <!-- 顯示回傳資料 --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- 引入 jQuery --> <script type="text/javascript"> $(document).ready(function() { $("#submitExample").click(function() { //ID 為 submitExample 的按鈕被點擊時 $.ajax({ type: "POST", //傳送方式 url: "service.php", //傳送目的地 dataType: "json", //資料格式 data: { //傳送資料 nickname: $("#nickname").val(), //表單欄位 ID nickname gender: $("#gender").val() //表單欄位 ID gender }, success: function(data) { if (data.nickname) { //如果後端回傳 json 資料有 nickname $("#demo")[0].reset(); //重設 ID 為 demo 的 form (表單) $("#result").html('<font color="#007500">您的暱稱為「<font color="#0000ff">' + data.nickname + '</font>」,性別為「<font color="#0000ff">' + data.gender + '</font>」!</font>'); } else { //否則讀取後端回傳 json 資料 errorMsg 顯示錯誤訊息 $("#demo")[0].reset(); //重設 ID 為 demo 的 form (表單) $("#result").html('<font color="#ff0000">' + data.errorMsg + '</font>'); } }, error: function(jqXHR) { $("#demo")[0].reset(); //重設 ID 為 demo 的 form (表單) $("#result").html('<font color="#ff0000">發生錯誤:' + jqXHR.status + '</font>'); } }) }) }); </script> </body> </html>

service.php

<?php
/*
 * 旋風之音 GoneTone
 * https://blog.reh.tw/
 *
 * 範例教學
 * https://blog.reh.tw/archives/662/
 */
header('Content-Type: application/json; charset=UTF-8'); //設定資料類型為 json,編碼 utf-8

if ($_SERVER['REQUEST_METHOD'] == "POST") { //如果是 POST 請求
    @$nickname = $_POST["nickname"]; //取得 nickname POST 值
    @$gender = $_POST["gender"]; //取得 gender POST 值
    if ($nickname != null && $gender != null) { //如果 nickname 和 gender 都有填寫
        //回傳 nickname 和 gender json 資料
        echo json_encode(array(
            'nickname' => $nickname,
            'gender' => $gender
        ));
    } else {
        //回傳 errorMsg json 資料
        echo json_encode(array(
            'errorMsg' => '資料未輸入完全!'
        ));
    }
} else {
    //回傳 errorMsg json 資料
    echo json_encode(array(
        'errorMsg' => '請求無效,只允許 POST 方式訪問!'
    ));
}
?>

範例網頁
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 留言