场景

前端时间选择控件，选择时间后点击搜索，请求后台数据，后台根据时间查询数据库中

一天的记录数并回显给前端，前端进行显示。

实现

前端页面代码(部分)

<div class="ibox float-e-margins"><div class="ibox "><div class="ibox-title"><h5>条件搜索</h5><div class="ibox-tools"><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></div></div><div class="ibox-content"><table class="table my-minus-1 mb-minus-1"><tbody><tr><td><div class="row" id="searchCondition"><div class="col-sm-2"><div class="form-group" id="data_1"><label class="col-form-label">创建时间</label><div class="input-group date col-lg-8"><span class="input-group-addon"><i class="fa fa-calendar"></i></span><input type="text" id="createTime" name="createTime" class="form-control"  ></div></div></div></div></td></tr></tbody><tfoot><tr class="text-center"><td colspan="4"><button id="resetBtn" class="btn btn-info mt-2" type="button"><i class="fa fa-reply"></i> 重置</button><button id="searchBtn" class="btn btn-info mt-2" type="button"><i class="fa fa-search"></i> 搜索</button></td></tr></tfoot></table></div></div><div class="ibox-content"><div class="ibox-title"><h1>今日看板</h1><tr><td><div class="widget lazur-bg p-xl"><h2>今日物流数(单)</h2><ul class="list-unstyled m-t-md"><li><label id="sumCount"></label></li><li><label>同比昨日:</label>-10%</li></ul></div></td>

页面效果

JQuery部分代码

其中在左边菜单栏点击后会跳转到上面的页面，然后通过jquery控制，页面加载完之后执行ajax异步请求数据。

此时前端时间选择控件值为空，直接请求后台会取当前时间作为查询条件。

$(document).ready(function() {//搜索及刷新按钮事件$("#searchBtn,#refreshBt").click(function () {// 刷新表格数据，分页信息不会重置});//置空按钮事件$("#resetBtn").click(function () {$("#searchCondition input").each(function () {$(this).val("");})$("#searchCondition select").each(function () {$(this).val("");})});//首次进页面获取页面数据var createTime = $("#createTime").val();$.ajax({type: 'POST',url: "/wmsLogisticMonitoring/getWmsLogisticsMonitoringData",cache: false,  //禁用缓存data:JSON.stringify({"createTime":""+createTime+""}),contentType: "application/json",dataType: "json",success: function (result) {debuggervar sumCount = result["sumCount"];$("#sumCount").html(sumCount);}});//置空按钮事件$("#resetBtn").click(function () {$("#searchCondition input").each(function () {$(this).val("");})$("#searchCondition select").each(function () {$(this).val("");})});//搜索按钮事件$("#searchBtn").click(function () {// 刷新表格数据，分页信息不会重置getData();});//点击按钮页面获取页面数据function getData() {var createTime = $("#createTime").val();$.ajax({type: 'POST',url: "/wmsLogisticMonitoring/getWmsLogisticsMonitoringData",cache: false,  //禁用缓存data:JSON.stringify({"createTime":""+createTime+""}),contentType: "application/json",dataType: "json",success: function (result) {var sumCount = result["sumCount"];$("#sumCount").html(sumCount);}});}});//刷新方法结束

请求后台Controller代码

@Controller
@RequestMapping("/wmsLogisticMonitoring")
@EnableConfigurationProperties(ConfigProperties.class)
public class WmsLogisticsMonitoringController {@Resourceprivate IBusLogisticsOrderService logisticsOrderService;@Autowiredprivate ConfigProperties configProperties;@Description("获取物流监控页面")@RequestMapping("/toWmsLogisticsMonitoring.html")public String page(Model model) {return "logisticsMonitoring/logisticsMonitoring.html";}@Description("获取页面数据")@ResponseBody@RequestMapping("/getWmsLogisticsMonitoringData")public Map<String,Object> getWmsLogisticsMonitoringData(@RequestBody Map<String, String> params){Map<String, Object> result = new HashMap<String, Object>();String createTime = params.get("createTime");SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd");if(createTime==""||createTime==null){createTime= simpleDateFormat.format(new Date()).toString();}//查询今日物流单try {result=logisticsOrderService.getWmsLogisticsMonitoringData(createTime);} catch (ParseException e) {e.printStackTrace();}return result;}}

Service具体实现代码

@Overridepublic Map<String, Object> getWmsLogisticsMonitoringData(String createTime) throws ParseException {Map<String, Object> result = new HashMap<String, Object>();SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd");Date createTimeDate = simpleDateFormat.parse(createTime);SimpleDateFormat simpleDateFormat1 =new SimpleDateFormat("yyyy-MM-dd");//查询今日物流数QueryWrapper<BusLogisticsOrder> BusLogisticsOrderQueryWrapper =new QueryWrapper<BusLogisticsOrder>();BusLogisticsOrderQueryWrapper.eq("deleted_flag","0");BusLogisticsOrderQueryWrapper.apply("CONVERT(varchar(100), gmt_creat, 23)= '"+createTime+"'");Integer sumCount = busLogisticsOrderMapper.selectCount(BusLogisticsOrderQueryWrapper);result.put("sumCount",sumCount);return result;}

效果

SpringBoot+MyBatisPlus实现前端传递时间查询条件ajax请求后台并回显数据流程整理相关推荐

SpringBoot+MyBatisPlus+Echarts实现查询并显示平均时长占比饼状图
场景数据库中每个数据都有开始时间以及结束时间两个字段. 需要根据创建时间筛选出当天的四种类型的数据的平均执行时间. SpringBoot+Echarts实现请求后台数据显示饼状图: https:// ...
Ajax通讯异常12002,前端MVC框架[02] 发送AJAX请求及建立连接池
前端MVC框架[02] 发送AJAX请求及建立连接池默认分类 2012-10-11 07:51:28 < ol start='100' class='dp-xml'> / 异步请求管理器 ...
vue el-tree 同时向后台传递选中和半选节点数据 (回显数据勾选问题已解决)
vue el-tree 同时向后台传递选中和半选节点数据 (回显数据勾选问题已解决) 参考文章: (1)vue el-tree 同时向后台传递选中和半选节点数据 (回显数据勾选问题已解决) (2)ht ...
ajax请求后台报没有body_前端常见面试 - 请求篇
对于前端来说,请求是前端日常工作必备的,通过请求才能与后端进行数据交互,尤其在现在前后端分离的开发模式下,请求显得就更加重要.因此,对于前端开发者来说,掌握请求就很重要.下面将从 http 请求和常见 ...
ajax传递数组 php,jQuery.ajax向后台传递数组问题如何解决
本文主要为大家详细介绍了jQuery.ajax向后台传递数组问题的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 今天重温了一个问题,jQuery.ajax向后台传递一 ...
ajax请求传递参数的方式,Ajax请求一般处理程序参数传递的几种方式
简介这篇文章主要介绍了Ajax请求一般处理程序参数传递的几种方式以及相关的经验技巧,文章约869字,浏览量397,点赞数3,值得参考! //第一种Ajax请求 $.ajax({ type:" ...
mybatisPlus根据起止时间作为条件进行查询
背景查询当天凌晨0.00 到当前时间的数据代码 SimpleDateFormat wrapperSdf1 = new SimpleDateFormat("yyyy-MM-dd HH:mm ...
项目开发遇到前端传递时间问题处理
前端请求参数:http://localhost:8080/order/page?page=1&pageSize=10&beginTime=2022-06-06%2000%3A00%3A ...
SpringBoot+MybatisPlus无实体类，查询数据库
因为要查询表的数据,表的名称是从另一个表中取出的,查询哪个表不一定,所以想到了不写实体类查询. 为了防止字段内容为null时,字段不出现,在application.yml中加 mybatis-plus ...

SpringBoot+MyBatisPlus实现前端传递时间查询条件ajax请求后台并回显数据流程整理

场景

实现

页面效果

JQuery部分代码

请求后台Controller代码

Service具体实现代码

效果

SpringBoot+MyBatisPlus实现前端传递时间查询条件ajax请求后台并回显数据流程整理相关推荐

最新文章

热门文章