實作前後端資料互動方法總結_基礎知識

這篇文章適合前後端協同開發經驗不足的新手閱讀。

HTML賦值

輸出到 Element 的 value 或 data-name

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

渲染結果

<input type="hidden" value="https://avatars1.githubusercontent.com/u/3949015&#63;v=3&s=40" />
<div data-avatar="https://avatars1.githubusercontent.com/u/3949015&#63;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>

JS賦值

將資料填入 <script> 的 JavaScript 變數宣告中。 </script>

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

或使用 Smarty 後端模板引擎：

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

優點：
傳遞資料非常方便。前端直接呼叫 user_avatar 變數使用資料。

缺點：

為了傳遞一個字串資料佔用了全域變數 user_avatar，當有很多資料需要傳輸時則會佔用很多全域變數。
如果傳回資料存在換行將會導致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 方法。

script填充JSON
什麼是JSON？

將 JSON 資料填入 <script> 標籤中，前端透過 DOM 取得 JSON字串並解析成物件。 </script>

<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模板引擎進行頁面渲染。 </script>

AJAX取得JSON

使用 AJAX 取得JSON資料

<span id="showdata">查看资料</span>
<div style="display:none;" id="box">
  <h2>用户信息</h2>
  <p id="info"><img src="loading.gif" /></p>
</div>
$('#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 取得使用者資料的範例。流程如下：

頁面上只顯示查看資料
用戶點擊查看資料
顯示使用者資訊和 loading 圖片
向伺服器發送獲取用戶資訊的AJAX請求
伺服器回傳JSON字串，$.getJSON 自動將傳回的 JSON字串轉換為物件
填充內容到

優點：

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

缺點：

會產生額外的HTTP請求。不能在DOM載入完成以後立即獲取，需要發送請求-接收回應。

使用建議：

適合載入非主要資訊、設定觸發條件（使用者點擊查看資料時），並提供友善的資料讀取等待提示。

WebSocket即時傳輸資料
如果將 AJAX請求和回應比喻成給伺服器發短信和等待伺服器回复短信，而 WebSocket 就如同和伺服器打電話。

此處不對WebSocket做過多介紹，附上參考資料：

Wiki:WebSocket
使用 HTML5 WebSocket 建立即時 Web 應用
Ajax vs WebSocket

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

以上所述就是本文的全部內容了，希望大家能夠喜歡。