ajax异步获取数据后动态向表格中添加数据的页面

来源：互联网发布：我的世界pe快速建造js 编辑：程序博客网时间：2024/04/26 05:55

因为某些原因，项目中突然需要做自己做个ajax异步获取数据后动态向表格中添加数据的页面，网上找了半天都没有看到现成的，决定自己写个例子

1、HTML页面

[html] view plain copy

print?

<!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>

<!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

[javascript] view plain copy

print?

$$(’#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(”查询失败”)
}
});
});
});

$(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、示例图

备注：css已经删除了，效果比上面示例图要差些

原创作品，允许转载，转载时请务必以超链接形式标明文章原始出处、作者信息和本声明

阅读全文

0 0