來自在知乎看到的前端 ，后端 關(guān)于數(shù)據(jù)交互的問題?的回答，出自作者NimoChu。

1. HTML賦值
2. JS賦值
3. script填充JSON
4. AJAX獲取JSON
5. WebSocket實時傳輸數(shù)據(jù)
6. 總結(jié)

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

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

渲染結(jié)果

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

使用 JS 獲取$('input').val();

$('div').data('avatar');

優(yōu)點：不占用全局變量，由 JS 自由獲取。
使用建議：適合傳遞簡單數(shù)據(jù)，也非常適合多個簡單數(shù)據(jù)與 Element 綁定關(guān)系。

  <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賦值
將數(shù)據(jù)填充到 <script> 的 JavaScript 變量聲明中。

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

或使用 Smarty 后端模板引擎：

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

優(yōu)點：傳遞數(shù)據(jù)非常方便。前端直接調(diào)用 user_avatar 變量使用數(shù)據(jù)。
缺點：

1. 為了傳遞一個字符串?dāng)?shù)據(jù)占用了全局變量 user_avatar，當(dāng)有很多數(shù)據(jù)需要傳輸時則會占用很多全局變量。
2. 如果返回數(shù)據(jù)存在換行將會導(dǎo)致JS報錯
   // 渲染結(jié)果有換行符var user_id = "https://avatars1.githubusercontent.com/u/3949015?v=3&s=40";// Uncaught SyntaxError: Unexpected token ILLEGAL

優(yōu)化：可以通過指向的某一個變量存放所有后端返回的內(nèi)容，最小程度占用全局變量。例：// PHP 代碼var SERVER_DATA = { username: {$username}, userid: {$userid}, title: {$title}}// 渲染結(jié)果var SERVER_DATA = { username: "NimoChu", userid: 1, title: 'F2E'}

使用建議：需要最快速度傳遞數(shù)據(jù)給 JS 并十分確定此數(shù)據(jù)穩(wěn)定時，使用此方式。數(shù)據(jù)格式復(fù)雜的建議使用script填充JSON 或AJAX獲取JSON 方法。

3. script填充JSON****JSON 語法**填充 JSON 數(shù)據(jù)到 <script> 標(biāo)簽中，前端通過 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>

優(yōu)點：頁面加載完成后就可以獲取到數(shù)據(jù)。不占用全局變量，可傳遞大量數(shù)據(jù)集合。
缺點：數(shù)據(jù)量特別大時會導(dǎo)致頁面初次加載變慢。變慢并不只是文件大小導(dǎo)致的，也因為服務(wù)器查詢數(shù)據(jù)并返回合集是需要時間，可使用AJAX獲取JSON完成按需加載和加載等待。
使用建議：適合傳遞在DOM加載完成時就需要用到的大量數(shù)據(jù)集合。例如：前端控制頁面渲染，后端將JSON數(shù)據(jù)源填充到 <script> 由前端使用 JavaScript模板引擎 進(jìn)行頁面渲染。如何選擇Javascript模板引擎（javascript template engine)？

4. AJAX獲取JSON使用 AJAX 獲取JSON數(shù)據(jù)

<span id="showdata">查看資料</span>
<div style="display:none;" id="box"> 
  <h2>用戶信息</h2> 
  <p id="info">![](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 獲取用戶資料的示例。流程如下：

1. 頁面上只顯示查看資料
2. 用戶點擊查看資料
3. 顯示用戶信息和 loading 圖片
4. 向服務(wù)器發(fā)送獲取用戶信息的AJAX請求
5. 服務(wù)器返回JSON字符串，$.getJSON 自動將返回的 JSON字符串轉(zhuǎn)換為對象
6. 填充內(nèi)容到 <p id="info">

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

缺點：會產(chǎn)生額外的HTTP請求。不能在DOM加載完成以后立即獲取，需要發(fā)送請求-接收響應(yīng)。

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

5. WebSocket實時傳輸數(shù)據(jù)如果將 AJAX請求和響應(yīng)比喻成給服務(wù)器發(fā)短信和等待服務(wù)器回復(fù)短信，而 WebSocket 就如同和服務(wù)器打電話。
此處不對WebSocket做過多介紹，附上參考資料：

1. WebSocket**
2. 使用 HTML5 WebSocket 構(gòu)建實時 Web 應(yīng)用**
3. Ajax vs WebSocket**

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

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