以下是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);
});
});请求页面：
后台代码：
/**
* 销售统计报表
* @return
*/
public void ordersReport() {
System.out.println(startDate+"----"+endDate);
List list = reportBiz.ordersReport(startDate,endDate);
write(JSON.toJSONString(list));
}
后台输出： 可以看出前台发送一次请求.
查询出结果，然后输入条件,点击查询。
前端执行到：
即将加载datagrid：
然后执行一段jQuery代码：
此时还没有 发送请求：
继续执行：
随即突然执行到：加载datagrid的部分：
页面此时也被刷新：
此时发起了查询后的第一次请求：时间非空
接着因为加载datagrid导致又发起了第二次请求：
这样第二次请求的结果覆盖了第一次请求的结果，因而导致问题。
开始以为是easyui的datagrid的问题，可是之前也这样使用过，没有出现任何问题，始终不懂是什么原因导致第二次请求的出现。
分析第二次请求出现的原因
1.图片加载
2.datagrid:在html里引用了一次，在js里又加载了一次
3.datagrid的源码setTimeout导致的问题
最终，经过排除才发现上面的问题都不是本问题出现的原因。
原因竟然是form表单提交导致的第二次请求：
对比上面鸿恩寺部分与之前错误的代码，发现是button没有定义type=“button”,且放在了form里，这样点击button相当于提交了form的数据，于是在button的点击事件执行完毕以后，又发起了一次提交表单的页面请求。我也是醉了……，仔细啊仔细。