后台传的json 数据遍历到HTML 页面

2024-07-12 00:21| 来源: 网络整理| 查看: 265

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

1、HTML页面

[html] view plain copy xx信息查询预定截止日期 SEQ 订单号排序字段酒店seq 订单号 cellid hotelSeq 酒店名称订单号联系人手机号预定时间 userId cellid gps定位城市 wifi定位城市定位距离 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 += "" + "" + data[i].hotel_seq + "" + "" + data[i].hotel_name + "" + "" + data[i].order_no + "" + "" + data[i].user_phone + "" + "" + data[i].create_time + "" + "" + data[i].user_id + "" + "" + data[i].cellid + "" + "" + data[i].gps_city + "" + "" + data[i].cell_city + "" + "" + data[i].distance + "" + ""; } tbody.innerHTML = str; } }, error: function () { alert("查询失败") } }); }); });

3、示例图

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

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

【本文地址】

公司简介

联系我们