因为某些原因,项目中突然需要做自己做个ajax异步获取数据后动态向表格中添加数据的页面,网上找了半天都没有 看到现成的,决定自己写个例子
1、HTML页面
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>xx信息查询</title>
<script type="text/javascript" src="/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="/js/ai/ai-lib.js"></script>
<script src="/js/cheat-order.js"></script>
<link rel="stylesheet" href="../css/common.css" type="text/css"/>
<link rel="stylesheet" href="../css/table.css" type="text/css"/>
</head>
<body>
<form>
<table id="table-search" width="80%" align="center" border="1">
<tr>
<td>预定截止日期</td>
<td><input name="checkDate" type="text" id="checkDate"></td>
</tr>
<tr>
<td>SEQ</td>
<td><input name="hotelSeq" id="hotelSeq" type="text"></td>
</tr>
<tr>
<td>订单号</td>
<td><input type="text" maxlength="50" name="orderNo" id="orderNo"></td>
</tr>
<tr>
<td>排序字段</td>
<td><select name="sortFiled" id="sortFiled">
<option value="hotelSeq">酒店seq</option>
<option value="orderNo">订单号</option>
<option value="cellid">cellid</option>
</select></td>
</tr>
<tr>
<td></td>
<td>
<input type="button" value="搜索" id="btSearch" class="ui right floated positive button btn-search"/>
</td>
</tr>
</table>
</form>
<br/>
<table id="table-result" width="80%" align="center" border="1">
<tr>
<th>hotelSeq</th>
<th>酒店名称</th>
<th>订单号</th>
<th>联系人手机号</th>
<th>预定时间</th>
<th>userId</th>
<th>cellid</th>
<th>gps定位城市</th>
<th>wifi定位城市</th>
<th>定位距离</th>
</tr>
<tbody id="tbody-result">
</tbody>
</table>
</body>
</html>
2、页面对应的js(cheat-order.js)
$(function () {
$('#btSearch').click(function () {
var checkDate = $('#checkDate').val();
var orderNo = $('#orderNo').val();
var sortFiled = $('#sortFiled').val();
var hotelSeq = $('#hotelSeq').val();
var tbody = window.document.getElementById("tbody-result");
$.ajax({
type: "post",
dataType: "json",
contentType: "application/json;charset=utf-8",
url: "http://localhost:8080/user/queryCheatOrder",
data: "{\"hotelSeq\":\"" + hotelSeq
+ "\",\"orderNo\":\"" + orderNo
+ "\",\"sortFiled\":\"" + sortFiled
+ "\",\"checkDate\":\"" + checkDate
+ "\"}",
success: function (msg) {
if (msg.ret) {
var str = "";
var data = msg.data;
for (i in data) {
str += "<tr>" +
"<td align='center'>" + data[i].hotelSeq + "</td>" +
"<td align='center'>" + data[i].hotelName + "</td>" +
"<td align='center'>" + data[i].orderNo + "</td>" +
"<td align='center'>" + data[i].userPhone + "</td>" +
"<td align='center'>" + data[i].createTime + "</td>" +
"<td align='center'>" + data[i].userId + "</td>" +
"<td align='center'>" + data[i].cellid + "</td>" +
"<td align='center'>" + data[i].gpsCity + "</td>" +
"<td align='center'>" + data[i].cellCity + "</td>" +
"<td align='center'>" + data[i].distance + "</td>" +
"</tr>";
}
tbody.innerHTML = str;
}
},
error: function () {
alert("查询失败")
}
});
});
});
3、后端接口
@Controller
@RequestMapping("/user")
public class UserController extends AbstractController {
private Logger logger = LoggerFactory.getLogger(UserController.class);
@RequestMapping(value = "/queryCheatOrder", method = RequestMethod.POST)
@ResponseBody
public APIResponse<List<SearchResult>> queryCheatOrder(
@RequestBody Search search,
HttpServletResponse response) {
logger.info("传入参数 = {}", JSON.toJSONString(search));
SearchResult result = new SearchResult();
result.setHotelName("测试酒店");
result.setUserId("123456");
result.setOrderNo("abc");
result.setHotelSeq("13143rqw34523");
result.setCellid("123");
result.setCellCity("北京");
result.setGpsCity("北京");
result.setUserPhone("15210108091");
result.setDistance("1200m");
result.setCreateTime("2018-08-24");
List<SearchResult> list = Lists.newArrayList();
list.add(result);
list.add(result);
return APIResponse.returnSuccess(list);
}
}
4、界面示例图
代码下载:https://gitee.com/liuyaohua/spring-simple/tree/master/table-ajax
本文已同步更新到公众号,沟通交流请关注公众号。