Ajax简单的请求数据以表格的形式渲染到页面
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>长安汽车</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <meta name="description" content=""> <meta name="keywords" content=""> <script src="https://cdn.bootcss.com/jquery/2.1.2/jquery.min.js"></script> <script src="https://img.huiyiguanjia.com/CDNFile/layer/layer-v3.1.1/layer/layer.js"></script> </head> <body> <div class="main"> <a onclick="lala()">点击我</a> <table id="table" border="1"> </table> </div> </body> </html> <script type="text/javascript"> function lala() { $.ajax({ type: "get", url: "http://www.sghc.top:8081/api/Values/list", dataType: "json", error: function(data) { alert("连接超时"); }, success: function(data) { console.log(data) console.log(data.data[0].key); console.log(typeof(data.data[0].mimeType)); var dataResult = data.data if (data.code == 200) { $("#table").html("<tr><td>名称</td><td>图片</td></tr>"); for (var i = 0; i < dataResult.length; i++) { var stingPic = dataResult[i].mimeType; if(stingPic=="image/jpeg"){ $("#table").append("<tr><td>" + dataResult[i].key + "</td><td>" + dataResult[i].mimeType + "</td><tr>") } }; } } }); } </script>
下图是师傅简化代码后的写法：
转载 ;https://www.cnblogs.com/fkcqwq/p/11363638.html
--------------------------------------------------------------------------自己项目------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <meta name="description" content=""> <meta name="author" content=""> <title>贵金属行情--金德门</title> <!-- Bootstrap core CSS --> <link href="static/jdm/static/css/bootstrap.min.css" rel="stylesheet"> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <link href="static/jdm/static/css/ie10-viewport-bug-workaround.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="static/jdm/static/css/jdm.css" rel="stylesheet"> <!-- Just for debugging purposes. Don't actually copy these 2 lines! --> <!--[if lt IE 9]><script src="static/jdm/static/js/ie8-responsive-file-warning.js"></script><![endif]--> <script src="static/jdm/static/js/ie-emulation-modes-warning.js"></script> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="static/jdm/static/js/html5shiv.min.js"></script> <script src="static/jdm/static/js/respond.min.js"></script> <![endif]--> </head> <body> <div class="header"> <div class="header-logo"><img src="static/jdm/static/picture/jdm_logo.jpg" width="100%"></div> </div><!-- /.container --> <div style="height: 10px"></div> <div class="container-fluid"> <div class="pull-right "> <span class="pull-right"><button class="btn btn-danger status" type="button">开盘</button></span> <span class="pull-right" style="margin-right: 10px"><h4 class="text-danger" id="runtime"><b>2020年5月25日16:15:44</b></h4></span> </div> </div> <div class="container-fluid"> <table class="table table-striped" > <thead> <tr class="table-head"> <td><h4>商品</h4></td> <td><h4>回购</h4></td> <td><h4>销售</h4></td> <td><h4>最高</h4></td> <td><h4>最低</h4></td> </tr> </thead> <tbody class="data_wrap"> {volist name="arr" id="vo"} <tr class="table-body"> <th><h4>{$vo.name}</h4></th> <td style="color: #ff3939;font-size: 16px;font-weight: bold;">{$vo.bidprice}</td> <td style="color: #ff3939;font-size: 16px;font-weight: bold;">{$vo.askprice}</td> <td style="color: #ff3939;font-size: 16px;font-weight: bold;">{$vo.high}</td> <td style="color: #ff3939;font-size: 16px;font-weight: bold;"> {$vo.zui_di}</td> </tr> {/volist} </tbody> <!--<tr class="table-body">--> <!--<th><h4>白银</h4></th>--> <!--<td><h4 id="JZJ_ag_1">-</h4></td>--> <!--<td><h4 id="JZJ_ag_2">-</h4></td>--> <!--<td><h4 id="JZJ_ag_3">-</h4></td>--> <!--<td><h4 id="JZJ_ag_4">-</h4></td>--> <!--</tr>--> <!--<tr class="table-body">--> <!--<th><h4>钯金</h4></th>--> <!--<td><h4 id="JZJ_pd_1">-</h4></td>--> <!--<td><h4 id="JZJ_pd_2">-</h4></td>--> <!--<td><h4 id="JZJ_pd_3">-</h4></td>--> <!--<td><h4 id="JZJ_pd_4">-</h4></td>--> <!--</tr>--> <!--<tr class="table-body">--> <!--<th><h4>铂金</h4></th>--> <!--<td><h4 id="JZJ_pt_1">-</h4></td>--> <!--<td><h4 id="JZJ_pt_2">-</h4></td>--> <!--<td><h4 id="JZJ_pt_3">-</h4></td>--> <!--<td><h4 id="JZJ_pt_4">-</h4></td>--> <!--</tr>--> <!--<tr class="table-body">--> <!--<th><h4>黄金<br><span style="font-size:14px;color:#bf9d63">Au99.99</span></h4></th>--> <!--<td><h4 id="SG5101_1">-</h4></td>--> <!--<td><h4 id="SG5101_2">-</h4></td>--> <!--<td><h4 id="SG5101_3">-</h4></td>--> <!--<td><h4 id="SG5101_4">-</h4></td>--> <!--</tr>--> <!--<tr class="table-body">--> <!--<th><h4>黄金<br><span style="font-size:14px;color:#bf9d63">(T+D)</span></h4></th>--> <!--<td><h4 id="SG5106_1">-</h4></td>--> <!--<td><h4 id="SG5106_2">-</h4></td>--> <!--<td><h4 id="SG5106_3">-</h4></td>--> <!--<td><h4 id="SG5106_4">-</h4></td>--> <!--</tr>--> <!--<tr class="table-body">--> <!--<th><h4>白银<br><span style="font-size:14px;color:#bf9d63">(T+D)</span></h4></th>--> <!--<td><h4 id="AGTD_1">-</h4></td>--> <!--<td><h4 id="AGTD_2">-</h4></td>--> <!--<td><h4 id="AGTD_3">-</h4></td>--> <!--<td><h4 id="AGTD_4">-</h4></td>--> <!--</tr>--> <!--<tr class="table-body">--> <!--<th><h4>伦敦金</h4></th>--> <!--<td><h4 id="XAUUSD_1">-</h4></td>--> <!--<td><h4 id="XAUUSD_2">-</h4></td>--> <!--<td><h4 id="XAUUSD_3">-</h4></td>--> <!--<td><h4 id="XAUUSD_4">-</h4></td>--> <!--</tr>--> <!----> <!--<tr class="table-body">--> <!--<th><h4>伦敦钯</h4></th>--> <!--<td><h4 id="SG--5123_1">-</h4></td>--> <!--<td><h4 id="SG--5123_2">-</h4></td>--> <!--<td><h4 id="SG--5123_3">-</h4></td>--> <!--<td><h4 id="SG--5123_4">-</h4></td>--> <!--</tr>--> <!--<tr class="table-body">--> <!--<th><h4>伦敦铂</h4></th>--> <!--<td><h4 id="XPTUSD_1">-</h4></td>--> <!--<td><h4 id="XPTUSD_2">-</h4></td>--> <!--<td><h4 id="XPTUSD_3">-</h4></td>--> <!--<td><h4 id="XPTUSD_4">-</h4></td>--> <!--</tr>--> <!--<tr class="table-body">--> <!--<th><h4>美黄金</h4></th>--> <!--<td><h4 id="GLNC_1">-</h4></td>--> <!--<td><h4 id="GLNC_2">-</h4></td>--> <!--<td><h4 id="GLNC_3">-</h4></td>--> <!--<td><h4 id="GLNC_4">-</h4></td>--> <!--</tr>--> <!----> <!--<tr class="table-body">--> <!--<th><h4>美铂金</h4></th>--> <!--<td><h4 id="PLNC_1">-</h4></td>--> <!--<td><h4 id="PLNC_2">-</h4></td>--> <!--<td><h4 id="PLNC_3">-</h4></td>--> <!--<td><h4 id="PLNC_4">-</h4></td>--> <!--</tr>--> <!--<tr class="table-body">--> <!--<th><h4>美钯金</h4></th>--> <!--<td><h4 id="PANC_1">-</h4></td>--> <!--<td><h4 id="PANC_2">-</h4></td>--> <!--<td><h4 id="PANC_3">-</h4></td>--> <!--<td><h4 id="PANC_4">-</h4></td>--> <!--</tr>--> <!--<tr class="table-body">--> <!--<th><h4>美元</h4></th>--> <!--<td><h4 id="USDCNH_1">-</h4></td>--> <!--<td><h4 id="USDCNH_2">-</h4></td>--> <!--<td><h4 id="USDCNH_3">-</h4></td>--> <!--<td><h4 id="USDCNH_4">-</h4></td>--> <!--</tr>--> </table> <p>以上数据仅供参考，使用前请务必仔细阅读免责声明，投资有风险，入市需谨慎，风险自负！</p> <p>金德门热线：0755-25617789</p> </div> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="static/jdm/static/js/jquery-1.12.4.min.js"></script> <script src="static/jdm/static/js/pako.js"></script> <script src="static/jdm/static/js/main.js"></script> <script src="static/jdm/static/js/bootstrap.js"></script> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <script src="static/jdm/static/js/ie10-viewport-bug-workaround.js"></script> <script type="application/javascript"> // var domain = window.location.host $(function () { //定时 setTimeout 、 重复执行 setInterval setInterval(function(){ $.ajax( { url: "{:url('index/index/get')}", data:'', type: "post", success:function(res) { var html=""; $.each(res.data,function (k,v) { html += ("<tr class=\"table-body\"><th><h4>"+v['name']+"</h4></th><td style=\"color: #ff3939;font-size: 16px;font-weight: bold;\">"+v['bidprice']+"</td><td style=\"color: #ff3939;font-size: 16px;font-weight: bold;\">"+v['askprice']+"</td><td style=\"color: #ff3939;font-size: 16px;font-weight: bold;\">"+v['high']+"</td><td style=\"color: #ff3939;font-size: 16px;font-weight: bold;\">"+v['zui_di']+" </td></tr>") }); console.log(html); $(".data_wrap").html(html) } } ); },600); // var html=""; // $.each(con, function(k,v) {//这里的函数参数是键值对的形式，k代表键名，v代表值 // html+='<li class="shopBox">'+ // '<div class="shopImg"><img src='+con[k].image1+'/></div>'+ // '<div class="shopListName">'+con[k].shopName+'</div>'+ // '<div class="shopPrice">'+ // '<span class="price">￥'+con[k].price+'</span>'+ // '<span class="marketPrice">￥'+con[k].markPrice+'</span>'+ // '</div>'+ // '</li>' // }); // $(".shop_box").append(html); }); </script> </body> </html>
// var html=""; // $.each(con, function(k,v) {//这里的函数参数是键值对的形式，k代表键名，v代表值 // html+='<li class="shopBox">'+ // '<div class="shopImg"><img src='+con[k].image1+'/></div>'+ // '<div class="shopListName">'+con[k].shopName+'</div>'+ // '<div class="shopPrice">'+ // '<span class="price">￥'+con[k].price+'</span>'+ // '<span class="marketPrice">￥'+con[k].markPrice+'</span>'+ // '</div>'+ // '</li>' // }); // $(".shop_box").append(html);
