後臺傳的json 資料遍歷到HTML 頁面

因為某些原因，專案中突然需要做自己做個ajax非同步獲取資料後動態向表格中新增資料的頁面，網上找了半天都沒有看到現成的，決定自己寫個例子

1、HTML頁面

[html] view plain copy

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

$(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已經刪除了，效果比上面示例圖要差些

原創作品，允許轉載，轉載時請務必以超連結形式標明文章原始出處、作者資訊和本宣告

後臺傳的json 資料遍歷到HTML 頁面

相關文章