前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >springboot搭建ajax请求显示Charts图形

springboot搭建ajax请求显示Charts图形

作者头像
高楼Zee
发布2019-12-12 22:04:56
1.1K0
发布2019-12-12 22:04:56
举报
文章被收录于专栏:7DGroup7DGroup

背景

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

正常请求图

效果

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

Ajax请求图

说明:

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

java演示

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

统一响应类

代码语言:javascript
复制
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类

代码语言:javascript
复制
@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参考代码

代码语言:javascript
复制
 $(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 () {

//编写函数

});

  • 函数写法
代码语言:javascript
复制
$(function () {
    //去首页
    submit_cookie();
});
function submit_cookie() {})

Get参考代码

代码语言:javascript
复制
//当点击在线用例编辑就请求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原理与写法,对自己理解前端性能有一定帮助,上面如果不明白可以百度查询相关资料。

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-12-11,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 7DGroup 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 背景
  • 正常请求图
    • 效果
      • java演示
      • 统一响应类
      • AjaxControler类
      • 前端写法
      • Post参考代码
      • 前端页面显示:
      • 回顾
      • Get参考代码
      • 总结:
  • Ajax请求图
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档