搜索到
1
篇与
的结果
-
Springboot使用LayUI将Ajax发送请求获取的返回数据用ECharts图表显示 后端使用Springboot，前端框架使用LayUI，前端页面一个日期控件，一个下拉框控件，实现选择日期，以及选择下拉框，点击提交，layui发送ajax请求到后端，请求数据返回后，在控件下方用echarts图表显示出来。HTML代码：<form class="layui-form" action="/"> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">选择日期</label> <div class="layui-input-inline"> <input type="text" name="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input date_selected"> </div> </div> <div class="layui-inline"> <label class="layui-form-label">选择企业</label> <div class="layui-input-inline"> <select name="company_name" lay-filter="company_name" class="com_selected"> <option value=""></option> <option value="0">选项一</option> <option value="1">选项二</option> <option value="2">选项三</option> <option value="3">选项四</option> </select> </div> </div> <div class="layui-inline view_history" style="margin-left: 70px;"> <div class="layui-input-inline"> <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即查看</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </div> </form>Javascript代码：<script> layui.use(['form', 'layedit', 'laydate', 'element', 'echarts', 'jquery'], function () { var form = layui.form , $ = layui.jquery , layer = layui.layer , layedit = layui.layedit , laydate = layui.laydate , element = layui.element , echarts = layui.echarts; //日期 laydate.render({ elem: '#date' }); //监听提交 var ndData = null; form.on('submit(demo1)', function (data) { var date_user = $(".date_selected").val(); var name_user = $(".com_selected").find("option:selected").text(); $.ajax({ url: "/history/getlist", type: "GET", data: { date: date_user, name: name_user }, dataType: "JSON", async: false, success: function (res) { /** * Echarts显示 */ var echartsRecords = echarts.init(document.getElementById('EchartZhu'), 'walden'); var optionRecords = { tooltip: { trigger: 'axis' }, legend: { data: ['油烟浓度', '颗粒物', '非甲烷总烃'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { feature: { saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: ['周一'，'周二','周三','周四','周五','周六','周日'] }, yAxis: { type: 'value', }, dataZoom: [ { type: 'inside', show: true, top: '90%', realtime: true, start: 85, end: 100 } ], series: [{ name: '油烟浓度', type: 'line', data: res } ] }; echartsRecords.setOption(optionRecords); // echarts 窗口缩放自适应 window.onresize = function () { echartsRecords.resize(); } } }); return false; }); }); </script> 这里有一个要注意的地方就是form.on监听提交的方法里面一定要有 return false来禁用表单跳转，不然的话，点击提交以后，iframe就会跳转，我这里是变成了首页，也就是iframe里面变成了另一个刚打开的系统首页对于Echarts的引入，个人不建议使用LayUI集成的，因为我用了集成的ECharts总有各种小毛病出现，什么 EchartsTheme.js找不到等等，我当时已经将EchartsTheme.js复制到每一个可能的文件夹下都还是这样抱错。最后我是直接在要显示ECharts的页面引入，而不是在一开始的整个LayUI框架首页引入。请求API返回的是登录页刚开始，我写好接口以后，尝试着自己创造链接，没有从前端页面获取用户选择的情况下测试下接口行不行。我发现浏览器上登录系统后，再从输入链接的话是能够返回数据的。但是，我要是清楚数据，或者说没有登录的情况下去访问，系统回跳转到登录页（PS：用Postman测试的时候也是返回的登录页的HTML代码）。在我这里是因为，在Security的配置中设置了除了登录页以及静态资源外都要登录后访问，于是我修改了security的配置文件，加了一行代码 web.ignoring().mvcMatchers("/history/**");@Override public void configure(WebSecurity web) throws Exception { web.ignoring().mvcMatchers("/lib/**", "/css/**", "/js/**"); web.ignoring().mvcMatchers("/history/**"); }放行该API路径后，使用postman已经layui中用ajax发送http请求都可以获取数据，而不用先登录。（可能不安全，大家看着办）
