html頁面做迴圈輸出標籤,將資料庫中的資料展示在頁面上
阿新 • • 發佈:2018-11-19
頁面是html頁面.只是其中兩塊div.我用到了跨庫查詢.
注:我後臺傳值,頁面未顯示資料.我後臺不傳值,只定義空的方法,不傳引數.頁面可顯示資料.
dao層的方法我是這麼定義的.
public List<Cars> queryByNew();
service層:
public List<Cars> queryByNew();
<div class="area "> <p> <h3 align="center"> <font color="#2372CF">|</font>今日推薦<font color="#2372CF">|</font> </h3> </p> <div class="title" align="center"> <h2 hidden="hidden">推薦車源</h2> <div class="tab"> <a href="#" onmouseover="todayzuixinshangjia()">最新上架</a><a href="#" onmouseover="todayzhunxinche()">準新車</a><a href="#" onmouseover="todaydijiasuv()">低價SUV</a><a href="#" onmouseover="todaylianshouche()">練手車</a><a href="#">個人車源</a> </div> <div class="morebox"></div> </div> <div class="cura1"></div> <ul class="tabcon caritem" id="ul_list"></ul> <ul class="tabcon caritem" id="geren()"></ul> <!-- 個人車源結束 --> <div class='btn-center'> <!-- href='/china/a0_0ms7dgscncgpi1ltocspexx0/#pvareaid=106289' --> <a href='/ms-mcms/templets/1/default/list/list.html' target='_blank' class='btn btn-cancel'>檢視更多 ></a> </div> </div> <div class="area "> <p> <h3 align="center"> <font color="#2372CF">|</font>認證車源<font color="#2372CF">|</font> </h3> </p> <div class="title"> <h2 hidden="hidden">認證車源</h2> <div class="tab"> <a href="#" onmouseover="CJRZ()">廠家認證</a><a href="#" onmouseover="SJRZ()">商家認證</a><a href="#" onmouseover="XCJX()">信車精選</a> </div> <div class="morebox"></div> </div> <ul class="tabcon caritem cur" id="CJRZ"> </ul> </div>
<script> function todayzuixinshangjia() { $.ajax({ url : url1 + '/queryByNew', type : 'post', dataType : 'json', success : function(data) { //data這個就是返回的引數 // alert("today最新上架獲取資料success"); var lbt = ""; for (var i = 0; i < data.length; i++) { lbt += '<li>' + '<a class="carImg" target="_blank" href="/hb-tangshan/buycar/carinfo_sohu_5788388.shtml">' + '<img width="325px" height="215px" title="' + data[i].name + '" src="' + data[i].coverUrl + '" style="display: inline;">' + '</a>' + '<a class="car-link" target="_blank" href="#">' + data[i].name + '</a>' + '<div class="car-info">' + '<p><span class="r"></span>+' + data[i].warrantyId + '+ | 6萬公里</p>' + '<span class="tip_orange">里程少</span><span class="tip_orange">' + data[i].age + '</span>' + '</div>' + '<div class="Carprice">' + '<span class="rmb-symbol"><em>¥' + data[i].onlinePriceCents + '</em>萬</span>' + '</div>' + '</li>'; } $("#ul_list").empty() $("#ul_list").append(lbt); }, error : function() { alert("today最新上架獲取資料異常"); } }); } function todayzhunxinche() { $.ajax({ url : url1 + '/queryByNewCars', type : 'post', dataType : 'json', success : function(data) { //data這個就是返回的引數 // alert("today準新車獲取資料success"); var lbt = ""; for (var i = 0; i < data.length; i++) { lbt += '<li>' + '<a class="carImg" target="_blank" href="/hb-tangshan/buycar/carinfo_sohu_5788388.shtml">' + '<img width="325px" height="215px" title="' + data[i].name + '" src="' + data[i].coverUrl + '" style="display: inline;">' + '</a>' + '<a class="car-link" target="_blank" href="#">' + data[i].name + '</a>' + '<div class="car-info">' + '<p><span class="r"></span>+' + data[i].warrantyId + '+ | 6萬公里</p>' + '<span class="tip_orange">里程少</span><span class="tip_orange">' + data[i].age + '</span>' + '</div>' + '<div class="Carprice">' + '<span class="rmb-symbol"><em>¥' + data[i].onlinePriceCents + '</em>萬</span>' + '</div>' + '</li>'; } $("#ul_list").empty() $("#ul_list").append(lbt); }, error : function() { alert("today準新車獲取資料異常"); } }); } function todaydijiasuv() { $.ajax({ url : url1 + '/queryBySUV', type : 'post', dataType : 'json', success : function(data) { //data這個就是返回的引數 // alert("today低價SUV獲取資料success"); var lbt = ""; for (var i = 0; i < data.length; i++) { lbt += '<li>' + '<a class="carImg" target="_blank" href="/hb-tangshan/buycar/carinfo_sohu_5788388.shtml">' + '<img width="325px" height="215px" title="' + data[i].name + '" src="' + data[i].coverUrl + '" style="display: inline;">' + '</a>' + '<a class="car-link" target="_blank" href="#">' + data[i].name + '</a>' + '<div class="car-info">' + '<p><span class="r"></span>+' + data[i].warrantyId + '+ | 6萬公里</p>' + '<span class="tip_orange">里程少</span><span class="tip_orange">' + data[i].age + '</span>' + '</div>' + '<div class="Carprice">' + '<span class="rmb-symbol"><em>¥' + data[i].onlinePriceCents + '</em>萬</span>' + '</div>' + '</li>'; } $("#ul_list").empty() $("#ul_list").append(lbt); }, error : function() { alert("today低價SUV獲取資料異常"); } }); } //today練手車 function todaylianshouche() { $.ajax({ url : url1 + '/queryByLianshoucar', type : 'post', dataType : 'json', success : function(data) { //data這個就是返回的引數 var lbt = ""; for (var i = 0; i < data.length; i++) { lbt += '<li>' + '<a class="carImg" target="_blank" href="/hb-tangshan/buycar/carinfo_sohu_5788388.shtml">' + '<img width="325px" height="215px" title="' + data[i].name + '" src="' + data[i].coverUrl + '" style="display: inline;">' + '</a>' + '<a class="car-link" target="_blank" href="#">' + data[i].name + '</a>' + '<div class="car-info">' + '<p><span class="r"></span>+' + data[i].warrantyId + '+ | 6萬公里</p>' + '<span class="tip_orange">里程少</span><span class="tip_orange">' + data[i].age + '</span>' + '</div>' + '<div class="Carprice">' + '<span class="rmb-symbol"><em>¥' + data[i].onlinePriceCents + '</em>萬</span>' + '</div>' + '</li>'; } $("#ul_list").empty() $("#ul_list").append(lbt); }, error : function() { alert("today練手車獲取資料異常"); } }); } function CJRZ() { $.ajax({ url : url1 + '/queryByCJ', type : 'post', dataType : 'json', success : function(data) { //data這個就是返回的引數 var lbt = ""; for (var i = 0; i < data.length; i++) { lbt += '<li>' + '<span class="tipbox tipico_blue">廠家<br>認證<em></em></span>' + '<a class="carImg" target="_blank" href="/hb-sjz/buycar/carinfo_cx_6156736.shtml">' + '<img width="325px" height="215px" title="' + data[i].name + '" src="' + data[i].coverUrl + '" style="display: inline;">' + '</a>' + '<a class="car-link" target="_blank" href="#">' + data[i].name + '</a>' + '<div class="car-info">' + '<p><span class="r"></span>+' + data[i].warrantyId + '+年上牌 | 6萬公里</p>' + '<span class="tip_blue">保障車</span><span class="tip_blue">有質保</span>' + '</div>' + '<div class="Carprice">' + '<span class="rmb-symbol"><em>¥' + data[i].onlinePriceCents + '</em>萬</span>' + '</div>' + '</li>'; } $("#CJRZ").empty() $("#CJRZ").append(lbt); }, error : function() { alert("today練手車獲取資料異常"); } }); } function SJRZ() { $.ajax({ url : url1 + '/queryBySJ', type : 'post', dataType : 'json', success : function(data) { //data這個就是返回的引數 var lbt = ""; for (var i = 0; i < data.length; i++) { lbt += '<li>' + '<span class="tipbox tipico_blue">商家<br>認證<em></em></span>' + '<a class="carImg" target="_blank" href="/hb-sjz/buycar/carinfo_cx_6156736.shtml">' + '<img width="325px" height="215px" title="' + data[i].name + '" src="' + data[i].coverUrl + '" style="display: inline;">' + '</a>' + '<a class="car-link" target="_blank" href="#">' + data[i].name + '</a>' + '<div class="car-info">' + '<p><span class="r"></span>+' + data[i].warrantyId + '+年上牌 | 6萬公里</p>' + '<span class="tip_blue">保障車</span><span class="tip_blue">有質保</span>' + '</div>' + '<div class="Carprice">' + '<span class="rmb-symbol"><em>¥' + data[i].onlinePriceCents + '</em>萬</span>' + '</div>' + '</li>'; } $("#CJRZ").empty() $("#CJRZ").append(lbt); }, error : function() { alert("today練手車獲取資料異常"); } }); } function XCJX() { $.ajax({ url : url1 + '/queryByXC', type : 'post', dataType : 'json', success : function(data) { //data這個就是返回的引數 var lbt = ""; for (var i = 0; i < data.length; i++) { lbt += '<li>' + '<span class="tipbox tipico_blue">信車<br>精選<em></em></span>' + '<a class="carImg" target="_blank" href="/hb-sjz/buycar/carinfo_cx_6156736.shtml">' + '<img width="325px" height="215px" title="' + data[i].name + '" src="' + data[i].coverUrl + '" style="display: inline;">' + '</a>' + '<a class="car-link" target="_blank" href="#">' + data[i].name + '</a>' + '<div class="car-info">' + '<p><span class="r"></span>+' + data[i].warrantyId + '+年上牌 | 6萬公里</p>' + '<span class="tip_blue">保障車</span><span class="tip_blue">有質保</span>' + '</div>' + '<div class="Carprice">' + '<span class="rmb-symbol"><em>¥' + data[i].onlinePriceCents + '</em>萬</span>' + '</div>' + '</li>'; } $("#CJRZ").empty() $("#CJRZ").append(lbt); }, error : function() { alert("today練手車獲取資料異常"); } }); } todayzuixinshangjia(); CJRZ(); </script>