前端，後端關於數據交互的問題?

12-30

今天，我和我同事在討論php 與js交互的時候，他認為：
&

我認為這樣比較亂，如果交互數據多了的話，所有，我改成這樣
&
&
...
&
&
var type = $("#hide_value #user_intern_status").val();
...

&
他說我這樣寫很麻煩，沒必要。
我想知道大家是咋想的，又如何處理前端（js）與後端（jsp,php等）的數據交互的。

重新修改答案後整理了一份《前後端數據交互方法》
在此介紹幾種常用的前後端數據交互方法，並給出使用建議。以提高前後端協同開發的效率。
目錄:
1. HTML賦值
2. JS賦值
3. script填充JSON

4. AJAX獲取JSON
5. WebSocket實時傳輸數據
6. 總結
1. HTML賦值
輸出到 Element 的 value 或 data-name
& &">&
渲染結果
& &&
使用 JS 獲取
$("input").val(); // http://jquery.bootcss.com/jQuery.data/ $("div").data("avatar");

優點：
不佔用全局變數，由 JS 自由獲取。
使用建議：
適合傳遞簡單數據，也非常適合多個簡單數據與 Element 綁定關係。
& &nimojs &刪除&& &nimo22 &刪除&& &nimo33 &刪除&& &nimo44 &刪除&& &nimo55 &刪除&& & & $("span").on("click",function(){ $.post("/ajax/remove/",$(this).data("userid"),function(data){ // ... }) }) &
2. JS賦值

將數據填充到 `&` 的 JavaScript 變數聲明中。
& var user_avatar = "&"; // 渲染結果 // var user_avatar = "https://avatars1.githubusercontent.com/u/3949015?v=3s=40"; &
或使用 Smarty 後端模板引擎：
& var user_avatar = "{$user_avatar}"; &
優點：
傳遞數據非常方便。前端直接調用 user_avatar 變數使用數據。
缺點：
1. 為了傳遞一個字元串數據佔用了全局變數 `user_avatar`，當有很多數據需要傳輸時則會佔用很多全局變數。
2. 如果返回數據存在換行將會導致JS報錯
// 渲染結果有換行符 var user_id = "
https://avatars1.githubusercontent.com/u/3949015?v=3s=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 數據到 `&` 標籤中，前端通過 DOM 獲取 JSON字元串並解析成對象。
&
優點：頁面載入完成後就可以獲取到數據。不佔用全局變數，可傳遞大量數據集合。缺點：數據量特別大時會導致頁面初次載入變慢。變慢並不只是文件大小導致的，也因為伺服器查詢數據並返回合集是需要時間，可使用AJAX獲取JSON完成按需載入和載入等待。使用建議：適合傳遞在DOM載入完成時就需要用到的大量數據集合。例如：前端控制頁面渲染，後端將JSON數據源填充到 `&` 由前端使用 JavaScript模板引擎進行頁面渲染。如何選擇Javascript模板引擎（javascript template engine)？ 4. AJAX獲取JSON 使用 AJAX 獲取JSON數據 &查看資料& & &用戶信息& & && & $("#showdata").on("click",function(){ $("#box").show(); $.getJSON("/ajax/userdata/",function(oData){ // oData = {"username":"nimojs","userid":1} $("#info").html("用戶名：" + oData.username + "&用戶ID：" + oData.userid); }) }) 這是一個通過AJAX 獲取用戶資料的示例。流程如下： 1. 頁面上只顯示查看資料 2. 用戶點擊查看資料 3. 顯示用戶信息和 loading 圖片 4. 向伺服器發送獲取用戶信息的AJAX請求 5. 伺服器返回JSON字元串，$.getJSON 自動將返回的 JSON字元串轉換為對象 6. 填充內容到 `&` 優點：不佔用全局變數和 DOM 節點，可以自由控制獲取數據的觸發條件（頁面載入完成時、用戶點擊查看資料時或用戶點擊某個按鈕時）。當開始獲取數據時可使用 loading 圖片佔位提示用戶數據正在讀取。防止頁面載入所有數據導致的頁面載入緩慢。缺點：會產生額外的HTTP請求。不能在DOM載入完成以後立即獲取，需要發送請求-接收響應。使用建議：適合載入非主要信息、設定觸發條件（用戶點擊查看資料時），並提供友好的數據讀取等待提示。 5. WebSocket實時傳輸數據如果將 AJAX請求和響應比喻成給伺服器發簡訊和等待伺服器回復簡訊，而 WebSocket 就如同和伺服器打電話。此處不對WebSocket做過多介紹，附上參考資料： 1. WebSocket 2. 使用 HTML5 WebSocket 構建實時 Web 應用 3. Ajax vs WebSocket 6. 總結每種情況都有每種情況的用處，沒有絕對正確的方法。根據實際情況靈活的選擇獲取數據方式。若作者顯示不是Nimo（被轉載了），請訪問Github原文進行討論：前後端數據交互方法 · Issue #13 · nimojs/blog · GitHub 任何時候兩種不同的技術發生硬耦合都是非常糟糕的軟體設計，因為會帶來不可調試、不可追蹤等問題，每一種技術都有自己從開發到調試、測試甚至是構建的一套完整技術棧和工作流，當兩種技術耦合在一起就會讓這個工作流部分或完全失效。所以從這個角度看，雖然問題裡面提出的第二種優於第一種，但是兩種方式本質上都是一個問題：硬耦合。第一種方案 JavaScript 和 PHP 耦合在一起了，第二種 HTML 和 PHP 耦合在一起了。所以還有更合理的解決辦法，那就是前後端完全 decouple，通過 API 通信獲取數據，用 JavaScript 動態渲染頁面。寫頁面的幾個人呢？如果前端只有一個，那兩種方案都可以。前端再拆分，寫html和寫js的分工的話，第二種更好。還有拆得更合理的方案，就是自定義屬性，畢竟第二個方案添加了無意義的元素，不如直接&"}">，甚至hide_value這個元素都可以用不著，直接在其父元素上定義就可以了。獲取就是 var data= xx.getJson($("#hide_value").attr("data-val")), jQuery本身沒有json處理函數，自己隨便搜個下來用吧。不過這些東西不是都是前端來寫嗎？後端只負責給出 $user_intern_status，怎麼調用是前端自己定的。你同事的意思是要把所有的js代碼寫到php文件裡面？不然真不明白第一種寫法怎麼跑的通想前後端通訊數據就用ajax啊。卧槽。。你和你的同事從來沒聽過PHP框架這種概念？為啥不用 php+smarty的框架呢你不會用smarty動靜分離么。或者寫jquery 寫法都沒有錯，得看實際情況再挑選最實惠的做法。前端後端資料庫的區別？第二種寫法雖然麻煩，但通常是更優的寫法。第一個相當於動態生成js文件，一方面會意味著js代碼相當死板（你這段js只為這一個user服務了，如果你要處理多個status就日了狗了，相當於你沒有分離MVC中的C和M），另一方面，個人覺得php和js耦合是個相當違反直覺的做法，調試和閱讀都會更麻煩。第二種的進化版本是，php只提供數據status，由js出面，以ajax向php索要數據。也就是前後端分離。針對前後端需要統一全局常量的情況（比如某個input的字數限制），可以考慮前後端公用一個配置文件，文件里寫好對這些常量的設置。這方面Spring做得比php好。實現前後端數據交互方法匯總不知道是誰抄誰的用框架就有框架自帶的方法，但還是覺得js和php要分開來，因為js的變化實在太平凡了。其實個人覺得你這樣更亂，除非數據是需要通過表單提交的，不然直接賦值給變數不是更好么？明明一行代碼操作就OK的事情，你要用兩行代碼。推薦閱讀：

前端 ，後端 關於數據交互的問題?

前端，後端關於數據交互的問題?