這篇文章給大家介紹幾種常用的前后端數據交互方法，并給出使用建議。以提高前后端協(xié)同開發(fā)的效率。非常的詳細，推薦給小伙伴們，有需要的小伙伴可以參考下。

1、HTML賦值

輸出到 Element 的 value 或 data-name

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

渲染結果

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

2、使用 JS 獲取

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

優(yōu)點：

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

使用建議：

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

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

3、JS賦值

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

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

或使用 Smarty 后端模板引擎：

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

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

缺點：

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

1 // 渲染結果有換行符 2 var user_id = "https://avatars1.githubusercontent.com/u/3949015?v=3&s=40"; 3 // Uncaught SyntaxError: Unexpected token ILLEGAL

優(yōu)化：

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

1 // PHP 代碼 2 var SERVER_DATA = { 3 username: {$username}, 4 userid: {$userid}, 5 title: {$title} 6 } 7 // 渲染結果 8 var SERVER_DATA = { 9 username: "NimoChu", 10 userid: 1, 11 title: 'F2E' 12 }

使用建議：

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

4、script填充JSON
什么是JSON？

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

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

優(yōu)點：

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

缺點：

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

使用建議：

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

5、AJAX獲取JSON

使用 AJAX 獲取JSON數據

1 <span id="showdata">查看資料</span> 2 <div style="display:none;" id="box"> 3 <h2>用戶信息</h2> 4 <p id="info"><img src="loading.gif" /></p> 5 </div> 6 $('#showdata').on('click',function(){ 7 $('#box').show(); 8 $.getJSON('/ajax/userdata/',function(oData){ 9 // oData = {"username":"nimojs","userid":1} 10 $('#info').html('用戶名：' + oData.username + '<br>用戶ID：' + oData.userid); 11 }) 12 })

這是一個通過AJAX 獲取用戶資料的示例。流程如下：

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

優(yōu)點：

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

缺點：

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

使用建議：

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

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

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

Wiki:WebSocket
使用 HTML5 WebSocket 構建實時 Web 應用
Ajax vs WebSocket

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

原文：http://www.jb51.net/article/63588.htm

轉載于:https://www.cnblogs.com/charmingyj/p/5761356.html

總結

以上是生活随笔為你收集整理的前后端数据交互方法 汇总的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。