後臺傳的json 資料遍歷到HTML 頁面
阿新 • • 發佈:2019-01-10
因為某些原因,專案中突然需要做自己做個ajax非同步獲取資料後動態向表格中新增資料的頁面,網上找了半天都沒有 看到現成的,決定自己寫個例子
1、HTML頁面
- <!doctype html>
- <html>
- <head>
- <metacharset="utf-8">
- <title>xx資訊查詢</title>
- <scripttype="text/javascript"src="/js/jquery-1.11.3.min.js"></script>
- <scripttype="text/javascript"
- <scriptsrc="/js/cheat-order.js"></script>
- </head>
- <body>
- <divclass="main pusher">
- <formclass="ui form vertical segment form-search">
- <divclass="fields">
- <divclass="halfsixCl wide field js_query_date">
- <labelfor="checkDate">預定截止日期</label>
- <inputname="checkDate"type="text"id="checkDate">
- </div>
- <divclass="sixCl wide field">
- <label>SEQ</label>
- <inputname="hotelSeq"id="hotelSeq"
- </div>
- <divclass="sixCl wide field js_query_seq">
- <label>訂單號</label>
- <inputtype="text"maxlength="50"name="orderNo"id="orderNo"placeholder="">
- </div>
- <divclass="sixCl wide field js_query_btype">
- <label>排序欄位</label>
- <selectname="sortFiled"id="sortFiled">
- <optionvalue="hotel_seq">酒店seq</option>
- <optionvalue="order_no">訂單號</option>
- <optionvalue="cellid">cellid</option>
- </select>
- </div>
- <div>
- <label></label>
- <inputtype="button"value="搜尋"id="btSearch"class="ui right floated positive button btn-search"/>
- </div>
- </div>
- </form>
- <divclass="table-container">
- <tableclass="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>
- <tbodyid="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已經刪除了,效果比上面示例圖要差些
原創作品,允許轉載,轉載時請務必以超連結形式標明文章 原始出處 、作者資訊和本宣告