因为某些原因,项目中突然需要做自己做个ajax异步获取数据后动态向表格中添加数据的页面,网上找了半天都没有 看到现成的,决定自己写个例子
1、HTML页面
<!doctype html> <html> <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> </head> <body> <div class="main pusher"> <form class="ui form vertical segment form-search"> <div class="fields"> <div class="halfsixCl wide field js_query_date"> <label for="checkDate">预定截止日期</label> <input name="checkDate" type="text" id="checkDate"> </div> <div class="sixCl wide field"> <label>SEQ</label> <input name="hotelSeq" id="hotelSeq" placeholder="" type="text"> </div> <div class="sixCl wide field js_query_seq"> <label>订单号</label> <input type="text" maxlength="50" name="orderNo" id="orderNo" placeholder=""> </div> <div class="sixCl wide field js_query_btype"> <label>排序字段</label> <select name="sortFiled" id="sortFiled"> <option value="hotel_seq">酒店seq</option> <option value="order_no">订单号</option> <option value="cellid">cellid</option> </select> </div> <div> <label></label> <input type="button" value="搜索" id="btSearch" class="ui right floated positive button btn-search"/> </div> </div> </form> <div class="table-container"> <table class="ui nine column table celled table-result" id="table-result"> <thead> <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> </thead> <tbody id="tbody-result"> </tbody> </table> </div> </div> </body> </html>
2、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",url: "ac/order/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>" + data[i].hotel_seq + "</td>" + "<td>" + data[i].hotel_name + "</td>" + "<td>" + data[i].order_no + "</td>" + "<td>" + data[i].user_phone + "</td>" + "<td>" + data[i].create_time + "</td>" + "<td>" + data[i].user_id + "</td>" + "<td>" + data[i].cellid + "</td>" + "<td>" + data[i].gps_city + "</td>" + "<td>" + data[i].cell_city + "</td>" + "<td>" + data[i].distance + "</td>" + "</tr>"; } tbody.innerHTML = str; } },error: function () { alert("查询失败") } }); }); });
3、示例图