首頁 > 文章 > web前端 > 前後端數據應該如何科學交互

前後端數據應該如何科學交互

php中世界最好的语言原創: 2018-03-09 11:40:111506瀏覽

這次帶給大家前後端資料應該如何科學交互，前後端資料交互的注意事項有哪些，下面就是實戰案例，一起來看一下。

HTML賦值

JS賦值

script填充JSON

AJAX取得JSON

WebSocket即時傳輸資料

總結

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

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

渲染結果

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

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

$(&#39;div&#39;).data(&#39;avatar&#39;);

優點：不佔用全域變量，由JS 自由取得。
使用建議：適合傳遞簡單資料，也非常適合多個簡單資料與 Element 綁定關係。

 <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>
  $(&#39;span&#39;).on(&#39;click&#39;,function(){ 
    $.post(&#39;/ajax/remove/&#39;,$(this).data(&#39;userid&#39;),function(data){ // ... })
  })</script>

2. JS賦值
將資料填入 3f1c4e4b6b16bbbd69b2ee476dc4f83a 的 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 方法。

3. script填入JSON****JSON 語法**填入 JSON 資料到 3f1c4e4b6b16bbbd69b2ee476dc4f83a 標籤中，前端透過 DOM 取得 JSON字串並解析成物件。

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

優點：頁面載入完成後就可以取得到資料。不佔用全域變量，可傳遞大量資料集合。
缺點：資料量特別大時會導致頁面初次載入變慢。變慢不只是檔案大小導致的，也因為伺服器查詢資料並回傳合集是需要時間，可使用AJAX取得JSON完成按需載入和載入等待。
使用建議：適合傳遞在DOM載入完成時就需要用到的大量資料集合。例如：前端控制頁面渲染，後端將JSON資料來源填入 3f1c4e4b6b16bbbd69b2ee476dc4f83a 由前端使用 JavaScript模板引擎進行頁面渲染。如何選擇Javascript模板引擎（javascript template engine)？

4. AJAX取得JSON使用 AJAX 取得JSON資料

<span id="showdata">查看资料</span>
<div style="display:none;" id="box"> 
  <h2>用户信息</h2> 
  <p id="info">![](loading.gif)</p>
</div>
$(&#39;#showdata&#39;).on(&#39;click&#39;,function(){ 
  $(&#39;#box&#39;).show(); 
  $.getJSON(&#39;/ajax/userdata/&#39;,function(oData){ 
    // oData = {"username":"nimojs","userid":1} 
    $(&#39;#info&#39;).html(&#39;用户名：&#39; + oData.username + &#39;<br>用户ID：&#39; + oData.userid); 
  })
})

這是一個透過AJAX 取得使用者資料的範例。流程如下：

頁面上只顯示查看資料

用戶點擊查看資料

#顯示使用者資訊和loading 圖片

向伺服器發送獲取使用者資訊的AJAX請求

伺服器傳回JSON字串，$.getJSON 自動將傳回的JSON字串轉換為物件

填滿內容到081157ee46b27f016eb1f52f4ee681ce

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

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

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

5. WebSocket即時傳輸資料如果將 AJAX請求和回應比喻成給伺服器發短信和等待伺服器回复短信，而 WebSocket 就如同和伺服器打電話。
此處不對WebSocket做過多介紹，附上參考資料：

WebSocket**

使用HTML5 WebSocket 建立即時Web 應用**

Ajax vs WebSocket**

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

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！