springboot搭建ajax請求顯示Charts圖形
- 2019 年 12 月 12 日
- 筆記
背景
前端與後端交互的時候通常是直接請求，但直接交互會影響用戶體驗，通過非同步方式進行與後端服務交互是不錯的簡單技術，Ajax是一個比較不錯的非同步請求，網上也有很多，但是還是想自己學習下，下面簡單演示一個請求，一方面方便自己複習，二方面給大家積累小小知識。
正常請求圖
效果
數據響應完全依賴後端服務響應，如果服務端出現異常現象，或者出現短路，或者前端顯示空白，或者閃頻等現象很影響用戶體驗，那麼小範圍或者局部刷新是一個必然產生的技術。
Ajax請求圖
說明：
- 前端輸入數據通過jquery/dom等技術獲取數據；
- Ajax通過get/post把數據提交個後端伺服器
- 伺服器響應結果給ajax,ajax再回顯到頁面或者通過轉發到其他頁面
java演示
- 新建springboot工程，選擇導入依賴jar
- 新建統一返回結果類
統一響應類
import java.util.HashMap;import java.util.Map; /** * @author liwen * @Title: Msg * @Description: 響應數據 * @date 2019/12/4 / 11:07 */public class Msg { /**狀態碼 100-成功 200-失敗*/ private int code; /**提示資訊*/ private String msg; /**用戶要返回給瀏覽器的數據*/ private Map<String, Object> extend = new HashMap<String, Object>(); public static Msg success(){ Msg result = new Msg(); result.setCode(100); result.setMsg("處理成功！"); return result; } public static Msg fail(){ Msg result = new Msg(); result.setCode(200); result.setMsg("處理失敗！"); return result; } public Msg add(String key,Object value){ this.getExtend().put(key, value); return this; } //省越get}
AjaxControler類
@PostMapping("/cookice") @ResponseBody public Msg getCookie(String cookie) { if (!StringUtils.isEmpty(cookie.trim())) { //做回顯數據用 HashMap<String, String> demokinfo = new HashMap<>(); demokinfo.put("cooke", cookie); demokinfo.put("ok", "我是java"); return Msg.success().add("page", demokinfo); } else { String oo = "{"calculable": true,"title": {"text": "某樓盤銷售情況","subtext": "純屬虛構"},"toolbox": {"feature": {"mark": {"show": true,"title": {"markUndo": "刪除輔助線","markClear": "清空輔助線","mark": "輔助線開關"},"lineStyle": {"color": "#1e90ff","type": "dashed","width": 2}},"dataView": {"show": true,"title": "數據視圖","readOnly": false,"lang": ["數據視圖","關閉","刷新"]},"magicType": {"show": true,"title": {"bar": "柱形圖切換","stack": "堆積","tiled": "平鋪","line": "折線圖切換"},"type": ["line","bar","stack","tiled"]},"restore": {"show": true,"title": "還原"},"saveAsImage": {"show": true,"title": "保存為圖片","type": "png","lang": ["點擊保存"]}},"show": true,"padding": 20},"tooltip": {"trigger": "axis"},"legend": {"data": ["意向","預購","成交"]},"xAxis": [{"type": "category","boundaryGap": false,"data": ["周一","周二","周三","周四","周五","周六","周日"]}],"yAxis": [{"type": "value"}],"series": [{"smooth": true,"name": "成交","type": "line","itemStyle": {"normal": {"areaStyle": {"type": "default"}}},"data": [10,12,21,54,260,830,710]},{"smooth": true,"name": "預購","type": "line","itemStyle": {"normal": {"areaStyle": {"type": "default"}}},"data": [30,182,434,791,390,30,10]},{"smooth": true,"name": "意向","type": "line","itemStyle": {"normal": {"areaStyle": {"type": "default"}}},"data": [1320,1132,601,234,120,90,20]}]}"; //前端顯示數據 HashMap<String, String> hashMap = new HashMap<>(); hashMap.put("infodemo", oo); return Msg.fail().add("key", hashMap); } }
前端寫法
給html綁定事件為：submit_cookie()：改函數可以隨便寫
顯示：
Post參考程式碼
$(function () { //去首頁 submit_cookie(); }); function submit_cookie() { //獲取cookie值 var cookie = $("#cookieinfo").val(); var keyChart99 = echarts.init(document.getElementById('maintp9')); $.ajax({ url: "/cookice", data: {"cookie": cookie}, type: "post", //回調函數 success: function (result) { if (result.code == 100) { console.log("響應結果數據：" + result.extend.key); // 使用剛指定的配置項和數據顯示圖表。 console.log("響應結果數據：" + result.extend.page.ok); //回顯數據 $("#cookieinfo").val(result.extend.page.cooke); } else {keyChart99.setOption(JSON.parse(result.extend.page.key)); console.log("響應結果數據：" + result.extend.key.infodemo); } } }); } else { console.log("cookie為空"); }}
前端頁面顯示：
回顧
- 本次採用jquery.js的ajax請求並回顯數據
- 需要聲明
$(function () {
//編寫函數
});
- 函數寫法
$(function () { //去首頁 submit_cookie(); }); function submit_cookie() {}）
Get參考程式碼
//當點擊在線用例編輯就請求function to_init() { $.ajax({ type: 'GET', url: '/xmind/ajaxData', data: {"ids": 1}, beforeSend: function () { loadingIndex = layer.msg('處理中', {icon: 16}); }, success: function (result) { layer.close(loadingIndex); if (result.code == web_status.SUCCESS) { layer.msg("資訊打開成功", {time: 1000, icon: 6}, function () { console.log("顯示xmind數據：" + userXmind); }); } else { layer.msg("資訊打開失敗，請重新操作", {time: 2000, icon: 5, shift: 6}, function () { }); } } });}
總結：
上面是簡單ajax的get/post請求，相信大家了解，其實在做性能明白ajax原理與寫法，對自己理解前端性能有一定幫助，上面如果不明白可以百度查詢相關資料。
