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

本篇文章交教您如何使用 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