hong's writing: 簡易型即時更新頁面

這篇獻給需要急需要讓網頁呈現非同步刷新的人員而又沒時間學習優秀的framework的開發人員。

非同步刷新的意思是在一個網頁上，再刷新的時候只會有一個部分更新，而其他的部分不變，例如當使用者輸入搜尋字串，接著按下搜尋的時候，畫面上會有一個區塊專門顯示搜尋結果，而其他部分像選單、頁頭、頁尾之類的都不會受到更動，以下來示範如何用很簡單的方式跟後台取得資料並渲染在網頁上。

這次要使用的技術為ajax，要使用這項技術必須引用JQuery，接著才能使用ajax的程式語法：

<!doctype html>
<html lang="en">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<head>
    <script>
        function Search() {
            $.ajax({
                type: "POST",
                url: "backend.php",
                data: {
                    "type": "search",
                    "id": $("#search_id").val()
                },
                dataType: "json",
                success: function (str) {
                    document.getElementById('result').innerHTML = str.name;
                },
                error: function (e) {
                    alert('something wrong');
                },
                beforeSend: function() {
                    // 發送中                
                }
            });
        }
    </script>
</head>
<body>
    我是：<span id="result"></span>！    <hr />
    <input id="search_id" />
<button onclick="Search()">搜尋</button>
</body>
</html>

這裡的jquery並不一定要第三版，使用1.8.x之類的穩定版本也行。

Search方法裡面就是固定格式

url: 要送請求到哪裡
data: 要傳送過去的值
dataType : 回傳資料格式(json or html)

這邊要特別注意：dataType的大小寫是有差別的，寫成datatype就會出錯！

到這邊為止，網頁渲染結果：

接著backend.php：

<?php
$type = $_POST["type"];
$id = $_POST["id"];
$result = array();

if ($type == "search") {
    if ($id == 1) {
        $name = "Chen Chih Hong";
    } elseif ($id == 2) {
        $name = "a dog";
    }
}

$result = array("name" => $name);

echo json_encode($result);

用post接收資料，接著在依我們的程式邏輯在php運算或進資料庫撈資料，最後如果是json格式的話，我們用echo的方式回傳就行了，接著，前台收到資料，success裡的程式碼就會起作用，於是我們得到結果：

以上就是json格式的示範，如果用html的話，只需要改一點地方：

<!doctype html>
<html lang="en">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<head>
    <script>
        function Search() {
            $.ajax({
                type: "POST",
                url: "backend.php",
                data: {
                    "type": "search",
                    "id": $("#search_id").val()
                },
                dataType: "html",
                success: function (str) {
                    document.getElementById('result').innerHTML = str;
                },
                error: function (e) {
                    alert('something wrong');
                },
                beforeSend: function() {
                    // 發送中                
                }
            });
        }
    </script>
</head>
<body>
    我是：<span id="result"></span>！    
    <hr />
    <input id="search_id" />
<button onclick="Search()">搜尋</button>
</body>
</html>

在前端我們改動了兩個地方，dataType 還有success裡的最後str，把.name去掉了，因為我們後端再回傳值的時候，json的格式會需要從裡面指定其中一個名稱，然後才會去撈到名稱對應的值，而html是直接回傳echo後面的所有東西一次給前端，來看一下後端變成html回傳的方法：

<?php
$type = $_POST["type"];
$id = $_POST["id"];

if ($type == "search") {
    if ($id == 1) {
        $name = "Chen Chih Hong";
    } elseif ($id == 2) {
        $name = "a dog";
    }
}

echo $name;

瞬間變得簡單許多，對於只需要傳一個值來說的確不錯，但如果要傳多個值，還是用json的格式會比較工整，前端也比較好梳理。

結果出來會是一樣：

其實現在有很多的framework都已經把非同步刷新做得很好了，之前有接觸一點點RoR、angular、React，都有支援非同步刷新，幾乎都不需要像這樣手動刻一個了，一起加油學習吧！

hong's writing

2016年10月15日星期六

簡易型即時更新頁面

沒有留言:

張貼留言

2016年10月15日 星期六

簡易型即時更新頁面

沒有留言:

張貼留言

2016年10月15日星期六