前後端分離——前後端資料互動
此文章適合前後端協同開發經驗不足的新手閱讀。
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 <spandata-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 資料到 <script>
標籤中,前端通過 DOM 獲取 JSON字串並解析成物件。
<!-- PHP 程式碼 --> <script type="text/json" id="data"><?php echo json_encode($data) ?></script> <!-- 頁面渲染結果 --> <script type="text/json" 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做過多介紹,附上參考資料:
總結
每種情況都有每種情況的用處,沒有絕對正確的方法。根據實際情況靈活的選擇獲取資料方式。
相關推薦
前後端分離——前後端資料互動
在此介紹幾種常用的前後端資料互動方法,並給出使用建議。以提高前後端協同開發的效率。此文章適合前後端協同開發經驗不足的新手閱讀。 HTML賦值 輸出到 Element 的 value 或 data-name <input type="hidden" value
mui+vue微信版前後端分離手機端登入頁面佈局和呼叫資料
第一步:頁面效果圖如下,是一個很常用的頁面 第二:程式碼如下,頁面非常少,沒有用webpack和vue-li,用了最原始的方法 <!DOCTYPE html> <html> <head> <meta charset="utf-8">
前後端分離專案之資料匯出為word例項
1.後臺restful api,組裝檔案輸出流物件到response響應包輸出到前端(vue+webpack node管理)。 後臺介面:根據projectId查詢相關資料,並將相關欄位封裝到word模板中,最後用流輸出檔案。 控制層程式碼 @Reques
前後端分離 後端跨域配置以及Opitions 方法不被訪問
後端這裡是 .net framework4.6 webapi 在web.config中<system.webServer>節點配置 <httpProtocol> <customHeaders> &n
前後端分離-服務端解決跨域問題引入閘道器之坑。
如果採用服務端解決跨域問題,一般做法是在application類中的filter中新增如下程式碼: @Bean public CorsFilter corsFilter() { final UrlBasedCorsConfigurationSource source = new UrlB
伺服器端與客戶端使用Json進行資料互動
伺服器端: 引入相應的包:json-lib-2.2-jdk15.jar Action: public String findAll() throws IOException{ List<News> news = newsService.findAll(); //
三層架構-伺服器端:通用WebService資料互動中介軟體概述
2、在WebService服務介面中, 新增對外互動的介面函式。以我們的中介軟體為例,一般處理的都是資料庫中的業務資料,那我們就需要處理好資料庫連線、提供基本的增刪改查介面。既然使用的是Webservice介面,那麼介面引數型別可以為WideString或者OleVariant等Delphi簡單型別,使其他語
使用AngularJS實現的前後端分離的資料互動過程
一. AngularJS簡介 AngularJS是什麼 AngularJS是一個開源Web應用程式框架。最初是由MISKO Hevery和Adam Abrons於2009年開發,現
JSON的互動協議(前後端分離)
JSON是什麼? JSON ( JavaScript Object Notation) ,是一種資料互動格式。 為什麼有這個技術? Json之前,大家都用 XML 傳遞資料。XML 是一種純文字格式,所以適合在網路上交換資料,但是 XML 格式比較複雜,終於道格拉斯·克羅克福特(Doug
真實資料對接 從0開發前後端分離的企業級上線專案
=》前往下載 第1章 課程介紹(2018配套教程:電商前端+電商後端+電商許可權管理系統課程) 本章中會先讓大家瞭解課程整體情況,然後手把手帶大家做一些開發前的準備工作。後臺管理系統測試賬號和密碼(切勿修改,導致其他同學體驗不了) 賬號:admin 密碼:admin (Java一期課程I
前後端資料互動,axios和jquery ajax的區別
axios作為Vue生態系統中濃墨重彩的一筆,我學習這個東西也是花了一定的時間的。剛開始的時候,也是遇到了很多問題。 逐漸摸透了它的脾氣。 首先說說FormData和Payload兩種資料格式的區別: 先是提交一個FormData的請求試試看: 然後我們看後端: 然後
Java,前後端分離,從VUE傳到後臺的資料的相關操作
獲取: Map<String, Object> paramMap = (Map<String, Object>) request.getAttribute("data"); Map<String, Object> formMap = (Map<Strin
python原生程式碼(無框架,無AJAX技術)前後端資料互動
採用form表格的post請求向後端傳遞資料 本系列即儘量採用原生程式碼方式實現瀏覽器與web伺服器之間進行互動;幫助小白們理解web伺服器的工作原理。 採用form表格從前端瀏覽器向後端提交資料是一種最原始的前端傳遞資料的方式,雖然程式碼執行較為麻煩,但是卻有助於深刻理解前後端的互動原
在vue中使用mock模擬資料(前後端分離)
最近前後端有點不協調,用了一下mockjs,下面記錄一下 我的環境是webpack+npm+vue,首先就用npm安裝mockjs,安裝命令是 npm install mockjs --save-dev,使用淘寶映象也是可以的,就是使用cnpm替換npm,一樣的效果 安裝好mockjs後,在main.js
vue+Springboot 前後端資料互動(1)
最近使用 vue 的 axios 往後端傳送資料,結果一直報錯,嘗試了多種方法 如果vue專案沒有打包放在 springboot 專案下的話,需要開啟跨域支援 在 vue 專案裡 config 目錄下的 index.js 檔案,找到 proxyTable 加上 '
最新對接真實資料 從0開發前後端分離企業級上線專案實戰
第1章 課程介紹(2018配套教程:電商前端+電商後端+電商許可權管理系統課程)本章中會先讓大家瞭解課程整體情況,然後手把手帶大家做一些開發前的準備工作。後臺管理系統測試賬號和密碼(切勿修改,導致其他同學體驗不了) 賬號
ssm ajax 前後端資料互動 (包括出現的406錯誤)
廢話 我哥從我大一的時候,就告訴我要寫部落格,我感覺好對不起他,現在大三了,才開始寫第一篇。。。 剛把ssm教程看完,然後就想用ajax實現前後端分離。於是乎,我搞了兩天才成功。。。 一、搭建環境 首先是ssm的一堆配置檔案,我很迷。。 都是從視訊裡扒下來的,對裡面的東西還不太瞭
Php如何返回json資料,前後端分離的基本解決方案
php返回json,xml,JSONP等格式的資料 返回json資料: header('Content-Type:application/json; charset=utf-8'); $arr = array('a'=>1,'b'=>2); exit(json_enco
表單+node(實現前後端資料互動)
('',(req,res) => { // req.query是讀取前臺的表單中的所有資料 var name = req.query.name; // 獲取name var pass = req.query.password // 獲取pass var i = 0
從壹開始前後端分離【 .NET Core2.0 +Vue2.0 】框架之十二 || 三種跨域方式比較,DTOs(資料傳輸物件)初探
更新反饋 1、博友@童鞋說到了,Nginx反向代理實現跨域,因為我目前還沒有使用到,給忽略了,這次記錄下,為下次補充。 程式碼已上傳Github+Gitee,文末有地址 今天忙著給小夥伴們提出的問題解答,時間上沒把握好,都快下班了,趕緊釋出:書說上文《從壹開始前