關於前端和后端數據交互問題

作者：NimoChu
鏈接：https://www.zhihu.com/question/26532621/answer/33144979
來源：知乎
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

重新修改答案后整理了一份《前后端數據交互方法》

在此介紹幾種常用的前后端數據交互方法，並給出使用建議。以提高前后端協同開發的效率。
目錄:

1. HTML賦值
2. JS賦值
3. script填充JSON
4. AJAX獲取JSON
5. WebSocket實時傳輸數據
6. 總結

1. HTML賦值
輸出到 Element 的 value 或 data-name

<input type="hidden" value="<?php echo $user_avatar;?>" />
<div data-value="<?php echo $user_avatar;?>"></div>

渲染結果

<input type="hidden" value="https://avatars1.githubusercontent.com/u/3949015?v=3&s=40" />
<div data-avatar="https://avatars1.githubusercontent.com/u/3949015?v=3&s=40"></div>

使用 JS 獲取

$('input').val();
// http://jquery.bootcss.com/jQuery.data/
$('div').data('avatar');

優點：
不占用全局變量，由 JS 自由獲取。

使用建議：

適合傳遞簡單數據，也非常適合多個簡單數據與 Element 綁定關系。

<ul>
<li>nimojs <span data-userid="1" >刪除</span></li>
<li>nimo22 <span data-userid="2" >刪除</span></li>
<li>nimo33 <span data-userid="3" >刪除</span></li>
<li>nimo44 <span data-userid="4" >刪除</span></li>
<li>nimo55 <span data-userid="5" >刪除</span></li>
</ul>
<script>
$('span').on('click',function(){
    $.post('/ajax/remove/',$(this).data('userid'),function(data){
        // ...
    })
})
</script>

2. JS賦值

將數據填充到 `<script>` 的 JavaScript 變量聲明中。

<script>
var user_avatar = "<?php echo $user_avatar;?>";
// 渲染結果
// var user_avatar = "https://avatars1.githubusercontent.com/u/3949015?v=3&s=40";
</script>

或使用 Smarty 后端模板引擎：

<script>
var user_avatar = "{$user_avatar}";
</script>

優點：
傳遞數據非常方便。前端直接調用 user_avatar 變量使用數據。

缺點：
1. 為了傳遞一個字符串數據占用了全局變量 `user_avatar`，當有很多數據需要傳輸時則會占用很多全局變量。
2. 如果返回數據存在換行將會導致JS報錯

// 渲染結果有換行符
var user_id = "

https://avatars1.githubusercontent.com/u/3949015?v=3&s=40";
// Uncaught SyntaxError: Unexpected token ILLEGAL

優化：
可以通過指向的某一個變量存放所有后端返回的內容，最小程度占用全局變量。例：

// PHP 代碼
var SERVER_DATA = {
    username: {$username},
    userid: {$userid},
    title: {$title}
}
// 渲染結果
var SERVER_DATA = {
    username: "NimoChu",
    userid: 1,
    title: 'F2E'
}

使用建議：
需要最快速度傳遞數據給 JS 並十分確定此數據穩定時，使用此方式。數據格式復雜的建議使用script填充JSON 或AJAX獲取JSON 方法。

3. script填充JSON
JSON 語法

填充 JSON 數據到 `<script>` 標簽中，前端通過 DOM 獲取 JSON字符串並解析成對象。

<script type="text/template" id="data">{"username":"nimojs","userid":1}</script>
<script>
var data = JSON.parse($('#data').html());
//{username:"nimojs",userid:1}
</script>

優點：
頁面加載完成后就可以獲取到數據。不占用全局變量，可傳遞大量數據集合。

缺點：
數據量特別大時會導致頁面初次加載變慢。變慢並不只是文件大小導致的，也因為服務器查詢數據並返回合集是需要時間，可使用AJAX獲取JSON完成按需加載和加載等待。

使用建議：
適合傳遞在DOM加載完成時就需要用到的大量數據集合。例如：前端控制頁面渲染，后端將JSON數據源填充到 `<script>` 由前端使用 JavaScript模板引擎 進行頁面渲染。
如何選擇Javascript模板引擎（javascript template engine)？

4. AJAX獲取JSON
使用 AJAX 獲取JSON數據

<script type="text/template" id="data">{"username":"nimojs","userid":1}</script>
<script>
var data = JSON.parse($('#data').html());
//{username:"nimojs",userid:1}
</script>

$('#showdata').on('click',function(){
    $('#box').show();
    $.getJSON('/ajax/userdata/',function(oData){
        // oData = {"username":"nimojs","userid":1}
        $('#info').html('用戶名：' + oData.username + '<br>用戶ID：' + oData.userid);
    })
})

這是一個通過AJAX 獲取用戶資料的示例。流程如下：
1. 頁面上只顯示查看資料
2. 用戶點擊查看資料
3. 顯示用戶信息和 loading 圖片
4. 向服務器發送獲取用戶信息的AJAX請求
5. 服務器返回JSON字符串，$.getJSON 自動將返回的 JSON字符串轉換為對象
6. 填充內容到 `<p id="info">`

優點：
不占用全局變量和 DOM 節點，可以自由控制獲取數據的觸發條件（頁面加載完成
時、用戶點擊查看資料時或用戶點擊某個按鈕時）。當開始獲取數據時可使用 loading 圖片占位提示用戶數據正在讀取。防止頁面加載所有數據導致的頁面加載緩慢。

缺點：
會產生額外的HTTP請求。不能在DOM加載完成以后立即獲取，需要發送請求-接收響應。

使用建議：
適合加載非主要信息、設定觸發條件（用戶點擊查看資料時），並提供友好的數據讀取等待提示。

5. WebSocket實時傳輸數據
如果將 AJAX請求和響應比喻成給服務器發短信和等待服務器回復短信，而 WebSocket 就如同和服務器打電話。

此處不對WebSocket做過多介紹，附上參考資料：
1. WebSocket
2. 使用 HTML5 WebSocket 構建實時 Web 應用
3. Ajax vs WebSocket

6. 總結
每種情況都有每種情況的用處，沒有絕對正確的方法。根據實際情況靈活的選擇獲取數據方式。

若作者顯示不是Nimo（被轉載了），請訪問Github原文進行討論： 前后端數據交互方法 · Issue #13 · nimojs/blog · GitHub