此文章適合前後端協同開發經驗不足的新手閱讀。
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>
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 變量使用數據。
缺點:
為了傳遞一個字符串數據占用了全局變量 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 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模板引擎進行頁面渲染。
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字符串轉換為對象
填充內容到 <p id="info">
優點:
不占用全局變量和 DOM 節點,可以自由控制獲取數據的觸發條件(頁面加載完成時、用戶點擊查看資料時或用戶點擊某個按鈕時)。當開始獲取數據時可使用 loading 圖片占位提示用戶數據正在讀取。防止頁面加載所有數據導致的頁面加載緩慢。
缺點:
會產生額外的HTTP請求。不能在DOM加載完成以後立即獲取,需要發送請求-接收響應。
使用建議:
適合加載非主要信息、設定觸發條件(用戶點擊查看資料時),並提供友好的數據讀取等待提示。
WebSocket實時傳輸數據
如果將 AJAX請求和響應比喻成給服務器發短信和等待服務器回復短信,而 WebSocket 就如同和服務器打電話。
此處不對WebSocket做過多介紹,附上參考資料:
Wiki:WebSocket
使用 HTML5 WebSocket 構建實時 Web 應用
Ajax vs WebSocket
總結
每種情況都有每種情況的用處,沒有絕對正確的方法。根據實際情況靈活的選擇獲取數據方式。
以上所述就是本文的全部內容了,希望大家能夠喜歡。