<!DOCTYPE html> <html> <head> <title>订单事件列表</title> <link rel="stylesheet" type="text/css" href="./css/style.css"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!-- ajax 传输方式为post --> <script> window.onload = function () { // setInterval(Action) setTimeout(Action, 1000); } Action = function () { $.ajax({ url: "http://127.0.0.1:8088/admApi/getOrder", type: "get", success: function (data) { console.log('data'); console.log(data); // var orders = JSON.parse(data); var obj = new Function("return" + data)();//转换后的JSON对象 var orders = eval(obj); for (var i = 0; i < orders.length; i++) { var order = orders[i]; var username = order.username; var account = order.account; var orderName = order.orderName; var time = order.time; var html = "<tr><td>" + username + "</td><td>" + account + "</td><td>" + orderName + "</td><td>" + time + "</td></tr>"; $("#order-list").append(html); } console.log(data); } }); } // $(document).ready(function(){ // $.ajax({ // url: "http://127.0.0.1:8086/admApi/getOrder", // type: "get", // success: function(data){ // var orders = JSON.parse(data); // for(var i = 0; i < orders.length; i++){ // var order = orders[i]; // var username = order.username; // var account = order.account; // var orderName = order.orderName; // var time = order.time; // var html = "<tr><td>" + username + "</td><td>" + account + "</td><td>" + orderName + "</td><td>" + time + "</td></tr>"; // $("#order-list").append(html); // } // console.log(data); // } // }); // }); </script> </head> <body> <table> <thead> <tr> <th>用户名</th> <th>账号</th> <th>订单名称</th> <th>时间</th> </tr> </thead> <tbody id="order-list"> </tbody> </table> </body> </html>
时间: 2024-04-14 17:05:08 浏览: 95
这段代码是一个使用ajax请求获取订单数据并将其展示在网页上的前端页面代码。其中通过jQuery库中的ajax方法向http://127.0.0.1:8088/admApi/getOrder发送get请求,获取到订单数据后解析为JSON对象,然后循环遍历其中的每个订单并将其数据拼接到html中,最后使用jQuery的append方法将拼接好的html添加到tbody元素中展示出来。同时,页面中也引入了一个style.css文件来控制页面的样式。
阅读全文