html页面做循环输出标签,将数据库中的数据展示在页面上

其他 2018-11-19 21:46:16 阅读次数: 0

页面是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'>查看更多&nbsp;></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 + '+&nbsp;|&nbsp;6万公里</p>' +
						'<span class="tip_orange">里程少</span><span class="tip_orange">' + data[i].age + '</span>' +
						'</div>' +
						'<div class="Carprice">' +
						'<span class="rmb-symbol"><em>&yen;' + 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 + '+&nbsp;|&nbsp;6万公里</p>' +
						'<span class="tip_orange">里程少</span><span class="tip_orange">' + data[i].age + '</span>' +
						'</div>' +
						'<div class="Carprice">' +
						'<span class="rmb-symbol"><em>&yen;' + 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 + '+&nbsp;|&nbsp;6万公里</p>' +
						'<span class="tip_orange">里程少</span><span class="tip_orange">' + data[i].age + '</span>' +
						'</div>' +
						'<div class="Carprice">' +
						'<span class="rmb-symbol"><em>&yen;' + 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 + '+&nbsp;|&nbsp;6万公里</p>' +
						'<span class="tip_orange">里程少</span><span class="tip_orange">' + data[i].age + '</span>' +
						'</div>' +
						'<div class="Carprice">' +
						'<span class="rmb-symbol"><em>&yen;' + 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 + '+年上牌&nbsp;|&nbsp;6万公里</p>' +
						'<span class="tip_blue">保障车</span><span class="tip_blue">有质保</span>' +
						'</div>' +
						'<div class="Carprice">' +
						'<span class="rmb-symbol"><em>&yen;' + 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 + '+年上牌&nbsp;|&nbsp;6万公里</p>' +
						'<span class="tip_blue">保障车</span><span class="tip_blue">有质保</span>' +
						'</div>' +
						'<div class="Carprice">' +
						'<span class="rmb-symbol"><em>&yen;' + 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 + '+年上牌&nbsp;|&nbsp;6万公里</p>' +
						'<span class="tip_blue">保障车</span><span class="tip_blue">有质保</span>' +
						'</div>' +
						'<div class="Carprice">' +
						'<span class="rmb-symbol"><em>&yen;' + data[i].onlinePriceCents + '</em>万</span>' +
						'</div>' +
						'</li>';
				}
				$("#CJRZ").empty()
				$("#CJRZ").append(lbt);


			},
			error : function() {
				alert("today练手车获取数据异常");
			}
		});

	}
	todayzuixinshangjia();
	CJRZ();
</script>

猜你喜欢

转载自blog.csdn.net/mqingo/article/details/84037356
今日推荐
Linus “吃狗粮”最积极！
开源日报 | Winamp播放器即将开源；生成式AI之战升级第二轮；Linus“吃狗粮”最积极；AI进入泡沫前期；吴泳铭为阿里云带来了什么？
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
周排行
SVN服务端安装在阿里云
实战 | 相机标定
webpack核心概念
note20——》只要肯低头吃苦，人生就会有救
PAT甲级 1062 Talent and Virtue （25 分）排序
NG Toolset开发笔记--5GNR Resource Grid（26）
如何对待上司
oracle命令
第9章 STL迭代器
logstash使用es映射模板
每日归档
更多
2024-05-20(36)
2024-05-19(0)
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022