ajax非同步獲取資料後動態向表格中新增資料(行)
阿新 • • 發佈：2019-01-10
因為某些原因，專案中突然需要做自己做個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、介面示例圖
本文已同步更新到公眾號，溝通交流請關注公眾號。
