場景

前端時間選擇控件，選擇時間后點擊搜索，請求后臺數(shù)據(jù)，后臺根據(jù)時間查詢數(shù)據(jù)庫中

一天的記錄數(shù)并回顯給前端，前端進(jìn)行顯示。

實現(xiàn)

前端頁面代碼(部分)

<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">創(chuàng)建時間</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>今日物流數(shù)(單)</h2><ul class="list-unstyled m-t-md"><li><label id="sumCount"></label></li><li><label>同比昨日:</label>-10%</li></ul></div></td>

頁面效果

JQuery部分代碼

其中在左邊菜單欄點擊后會跳轉(zhuǎn)到上面的頁面，然后通過jquery控制，頁面加載完之后執(zhí)行ajax異步請求數(shù)據(jù)。

此時前端時間選擇控件值為空，直接請求后臺會取當(dāng)前時間作為查詢條件。

$(document).ready(function() {//搜索及刷新按鈕事件$("#searchBtn,#refreshBt").click(function () {// 刷新表格數(shù)據(jù)，分頁信息不會重置});//置空按鈕事件$("#resetBtn").click(function () {$("#searchCondition input").each(function () {$(this).val("");})$("#searchCondition select").each(function () {$(this).val("");})});//首次進(jìn)頁面獲取頁面數(shù)據(jù)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 () {// 刷新表格數(shù)據(jù)，分頁信息不會重置getData();});//點擊按鈕頁面獲取頁面數(shù)據(jù)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);}});}});//刷新方法結(jié)束

請求后臺Controller代碼

@Controller @RequestMapping("/wmsLogisticMonitoring") @EnableConfigurationProperties(ConfigProperties.class) public class WmsLogisticsMonitoringController {@Resourceprivate IBusLogisticsOrderService logisticsOrderService;@Autowiredprivate ConfigProperties configProperties;@Description("獲取物流監(jiān)控頁面")@RequestMapping("/toWmsLogisticsMonitoring.html")public String page(Model model) {return "logisticsMonitoring/logisticsMonitoring.html";}@Description("獲取頁面數(shù)據(jù)")@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具體實現(xiàn)代碼

?

@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");//查詢今日物流數(shù)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;}

效果

?

?

總結(jié)

以上是生活随笔為你收集整理的SpringBoot+MyBatisPlus实现前端传递时间查询条件ajax请求后台并回显数据流程整理的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。