datagrid页面请求两次问题分析

刺骨的言语ヽ痛彻心扉 2022-03-16 08:40 263阅读 0赞

以下是html代码：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <link rel="stylesheet" type="text/css" href="ui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="ui/themes/icon.css">
    <script type="text/javascript" src="ui/jquery.min.js"></script>
    <script type="text/javascript" src="ui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="ui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="ui/jquery.serializejson.min.js"></script>
    <script type="text/javascript" src="js/report.js"></script>
    
    </head>
    <body>
    <form id="searchForm">
    	开始日期：<input name="startDate" class="easyui-datebox">
    	截止日期：<input name="endDate" class="easyui-datebox">
    	<button id="btnSearch">查询</button>
    </form>
    
    <div style="height:2px;" ></div>
    <table id="grid"></table>
    </body>
    </html>

以下是report.js代码：

$(function(){
    	//加载表格数据
    	$('#grid').datagrid({
    		url:'report_ordersReport',
    		columns:[[
    			{field:'name',title:'商品类型',width:100},
    			{field:'y',title:'销售额',width:100}
    		]],
    		singleSelect: true,
    	});
    
    	//点击查询按钮
    	$('#btnSearch').bind('click',function(){
    		//把表单数据转换成json对象
    		var formData = $('#searchForm').serializeJSON();
    		//alert(JSON.stringify(formData));
    		if(formData.endDate){//有输入就是true
    			formData.endDate+=" 23:59:59";
    		}
    		$('#grid').datagrid('load',formData);
    	});
    });

请求页面：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NsNzIzNDAx_size_16_color_FFFFFF_t_70][]

后台代码：

/**
    	 * 销售统计报表
    	 * @return
    	 */
    	public void ordersReport() {
    		System.out.println(startDate+"----"+endDate);
    		List list = reportBiz.ordersReport(startDate,endDate);
    		write(JSON.toJSONString(list));
    	}

后台输出： 可以看出前台发送一次请求.

![2019022710172556.png][]

查询出结果，然后输入条件,点击查询。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NsNzIzNDAx_size_16_color_FFFFFF_t_70 1][]

前端执行到：

![20190227102001151.png][]

即将加载datagrid：

然后执行一段jQuery代码：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NsNzIzNDAx_size_16_color_FFFFFF_t_70 2][]

此时还没有 发送请求：

![2019022710215686.png][]

继续执行：

随即突然执行到：加载datagrid的部分：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NsNzIzNDAx_size_16_color_FFFFFF_t_70 3][]

页面此时也被刷新：

![20190227102405128.png][]

此时发起了查询后的第一次请求：时间非空

![20190227102458854.png][]

接着因为加载datagrid导致又发起了第二次请求：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NsNzIzNDAx_size_16_color_FFFFFF_t_70 4][]

![20190227102633906.png][]

这样第二次请求的结果覆盖了第一次请求的结果，因而导致问题。

开始以为是easyui的datagrid的问题，可是之前也这样使用过，没有出现任何问题，始终不懂是什么原因导致第二次请求的出现。

分析第二次请求出现的原因

1.图片加载

2.datagrid:在html里引用了一次，在js里又加载了一次

3.datagrid的源码setTimeout导致的问题

最终，经过排除才发现上面的问题都不是本问题出现的原因。

原因竟然是form表单提交导致的第二次请求：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NsNzIzNDAx_size_16_color_FFFFFF_t_70 5][]

对比上面鸿恩寺部分与之前错误的代码，发现是button没有定义type=“button”,且放在了form里，这样点击button相当于提交了form的数据，于是在button的点击事件执行完毕以后，又发起了一次提交表单的页面请求。我也是醉了……，仔细啊仔细。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NsNzIzNDAx_size_16_color_FFFFFF_t_70]: /images/20220316/9b8bb8374b4d4a1a8680b999260837ce.png
[2019022710172556.png]: /images/20220316/713d37b6b0914fc988448a0b360fc338.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NsNzIzNDAx_size_16_color_FFFFFF_t_70 1]: /images/20220316/799e3dd7971042109c534b1da6e6ecb7.png
[20190227102001151.png]: /images/20220316/c197b56f11eb474296c00ed80b1a98bc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NsNzIzNDAx_size_16_color_FFFFFF_t_70 2]: /images/20220316/11260ac65783465fb1c0e6d51126978c.png
[2019022710215686.png]: /images/20220316/b4e5b80e189f44deb1e1664633e62d58.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NsNzIzNDAx_size_16_color_FFFFFF_t_70 3]: /images/20220316/6d1c92ea7fd24f7a979203f8e0688674.png
[20190227102405128.png]: /images/20220316/faa141a038cd43c7995aeaee6c34ad89.png
[20190227102458854.png]: /images/20220316/9a9d1a921da249b182daa68aa1621418.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NsNzIzNDAx_size_16_color_FFFFFF_t_70 4]: /images/20220316/d638441a3dd74eacb566720aa1e09d58.png
[20190227102633906.png]: /images/20220316/cdc05da50f81411088a19f40e4df1939.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NsNzIzNDAx_size_16_color_FFFFFF_t_70 5]: /images/20220316/7163c38128e44b2698519100fb718ab0.png