springboot搭建ajax请求显示Charts图形-CFANZ编程社区

背景

前端与后端交互的时候通常是直接请求，但直接交互会影响用户体验，通过异步方式进行与后端服务交互是不错的简单技术，Ajax是一个比较不错的异步请求，网上也有很多，但是还是想自己学习下，下面简单演示一个请求，一方面方便自己复习，二方面给大家积累小小知识。

正常请求图

springboot搭建ajax请求显示Charts图形_ajax

效果

数据响应完全依赖后端服务响应，如果服务端出现异常现象，或者出现短路，或者前端显示空白，或者闪频等现象很影响用户体验，那么小范围或者局部刷新是一个必然产生的技术。

Ajax请求图

springboot搭建ajax请求显示Charts图形_java_02

说明：

前端输入数据通过jquery/dom等技术获取数据；
Ajax通过get/post把数据提交个后端服务器
服务器响应结果给ajax,ajax再回显到页面或者通过转发到其他页面

java演示

新建springboot工程，选择导入依赖jar
新建统一返回结果类

统一响应类

1. import java.util.HashMap;
2. import java.util.Map;
3. 
4. /**
5.  * @author liwen
6.  * @Title: Msg
7.  * @Description: 响应数据
8.  * @date 2019/12/4 / 11:07
9.  */
10. public class Msg {
11.     /**状态码   100-成功    200-失败*/
12.     private int code;
13.     /**提示信息*/
14.     private String msg;
15. 
16.     /**用户要返回给浏览器的数据*/
17.     private Map<String, Object> extend = new HashMap<String, Object>();
18. 
19.     public static Msg success(){
20.         Msg result = new Msg();
21.         result.setCode(100);
22.         result.setMsg("处理成功！");
23.         return result;
24.     }
25. 
26.     public static Msg fail(){
27.         Msg result = new Msg();
28.         result.setCode(200);
29.         result.setMsg("处理失败！");
30.         return result;
31.     }
32. 
33.     public Msg add(String key,Object value){
34.         this.getExtend().put(key, value);
35.         return this;
36.     }
37. 
38.    //省越get
39. }

AjaxControler类

1. @PostMapping("/cookice")
2.     @ResponseBody
3.     public Msg getCookie(String cookie) {
4.         if (!StringUtils.isEmpty(cookie.trim())) {
5.             //做回显数据用
6.             HashMap<String, String> demokinfo = new HashMap<>();
7. 
8.             demokinfo.put("cooke", cookie);
9.            demokinfo.put("ok", "我是java");
10.             return Msg.success().add("page", demokinfo);
11.         } else {
12. 
13.             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]}]}";
14.               //前端显示数据
15.            HashMap<String, String> hashMap = new HashMap<>();
16.             hashMap.put("infodemo", oo);
17. 
18.             return Msg.fail().add("key", hashMap);
19.         }
20. 
21.     }

前端写法

给html绑定事件为：submit_cookie()：改函数可以随便写

springboot搭建ajax请求显示Charts图形_ajax_03

显示：

springboot搭建ajax请求显示Charts图形_数据_04

Post参考代码

1.  $(function () {
2.         //去首页
3.         submit_cookie();
4.     });
5. 
6.     function submit_cookie() {
7.         //获取cookie值
8.         var cookie = $("#cookieinfo").val();
9.         var keyChart99 = echarts.init(document.getElementById('maintp9'));
10.           $.ajax({
11.                 url: "/cookice",
12.                 data: {"cookie": cookie},
13.                 type: "post",
14.                  //回调函数
15.                 success: function (result) {
16.                     if (result.code == 100) {
17.                          console.log("响应结果数据：" + result.extend.key);
18.                         // 使用刚指定的配置项和数据显示图表。
19.                        console.log("响应结果数据：" + result.extend.page.ok);
20.                         //回显数据
21.                         $("#cookieinfo").val(result.extend.page.cooke);
22. 
23.                     } else {
24. keyChart99.setOption(JSON.parse(result.extend.page.key));
25.                      console.log("响应结果数据：" + result.extend.key.infodemo);
26.                     }
27.                 }
28.             });
29.         } else {
30.             console.log("cookie为空");
31.         }
32. }

前端页面显示：

springboot搭建ajax请求显示Charts图形_数据_05

回顾

本次采用jquery.js的ajax请求并回显数据
需要声明

$(function () {
//编写函数
});

函数写法

$(function () {
    //去首页
    submit_cookie();
});
function submit_cookie() {}）

Get参考代码

1. //当点击在线用例编辑就请求
2. function to_init() {
3.     $.ajax({
4.         type: 'GET',
5.         url: '/xmind/ajaxData',
6.         data: {"ids": 1},
7.         beforeSend: function () {
8.             loadingIndex = layer.msg('处理中', {icon: 16});
9.         },
10.         success: function (result) {
11.             layer.close(loadingIndex);
12.             if (result.code == web_status.SUCCESS) {
13.                 layer.msg("信息打开成功", {time: 1000, icon: 6}, function () {
14.                     console.log("显示xmind数据：" + userXmind);
15.                 });
16.             } else {
17.                 layer.msg("信息打开失败，请重新操作", {time: 2000, icon: 5, shift: 6}, function () {
18. 
19.                 });
20.             }
21. 
22.         }
23.     });
24. }