2. 程式人生 > >html頁面做迴圈輸出標籤,將資料庫中的資料展示在頁面上

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'>檢視更多&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>

 

相關推薦

html頁面做迴圈輸出標籤,將資料庫中的資料展示在頁面上

頁面是html頁面.只是其中兩塊div.我用到了跨庫查詢. 注:我後臺傳值,頁面未顯示資料.我後臺不傳值,只定義空的方法,不傳引數.頁面可顯示資料. dao層的方法我是這麼定義的. public List<Cars> queryByNew(); service層: p

php 如何將資料庫中的資料以表格的形式列印到html頁面

需要兩個頁面：顯示錶格的html頁面index.html（頁面內包含js），進行後臺處理的php頁面index.phphtml頁面部分：<!doctype html><html><head><meta charset="utf-8"><title>表

小程式迴圈輸出標籤

.wxml   <view class="classname" wx:for="{{array}}"> <!-- 設定位置style="transform:translate({{item.offsetX}}px, {{item.offsetY}}px) ;"

在PHP中實現將資料庫中的資料在頁面表格中呈現

一、實現思路：(匯入bootstrap的css，js以及jquery以後) 1.連線資料庫，執行sql查詢語句； 2.檢測資料庫是否連線成功，sql語句是否執行成功； 3.sql語句成功執行後獲得mysqli_result物件（只有執行增、刪、改查詢成功後才會返回mysqli_resul

HTML頁面做判斷if .... else .....

個人站點 :http://oldchen.iwulai.com/     語法: <if condition="條件"> <else/> </if> <if condition="條件

tp5迴圈輸出標籤

當我們在後臺獲取到資料之後，怎麼在前端頁面進行顯示呢? 下面我們來講解下，我們通常在後臺獲取到資料之後怎麼在前端頁面進行顯示呢？ 話不多說，發碼過來。 我們要了解的東西叫 迴圈輸出標籤 第一步，首先要做的事情，看自己的配置檔案。 注意：以下程式碼是以我

jquery實現html頁面的導航的標籤內容切換

原理： 導航欄的ul li 都對應的 一個div，每個li單機時候新增屬性，並且與之對應的div展示。 主要是利用jquery的一些方法進行操作； <ul class="switch"> <li class="selected">導航一&l

解決html頁面插入中文資料到mysql資料庫出現亂碼的情況。

今天測試mysql資料庫插入功能，連線資料庫後不知道怎麼回事，插入的中文內容完全是些看不懂的東西。最後對照網上的教程，最終解決了問題： 我沒有解決之前，我的變數引數如下： ####解決方法如下：只需要在my.ini配置檔案中加入這兩行，記住修改之後儲存。然後重啟mysql（

JSP+Servlet+MySQL完成將資料庫中的資料顯示到頁面

步驟： 1 先寫Servlet程式碼，首先匯入mysql-connector-java-5.1.40-bin.jar，在init()方法中載入jdbc驅動，在doGet()方法中獲取資料庫連線物件，然後獲取SQL的操作物件。 程式碼如下： import java.io.I

將資料庫中已有表匯入到powerDesigner生成pdm檔案

如何將資料庫中已有表匯入到powerDesigner生成pdm檔案   1、create new PDM； 2、select database menu; 3、click Reverse  Engin

將資料庫中的表顯示到dataGridView中

using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using Syste

java實現將資料庫中的資料匯入到

HSSFWorkbook workbook = new HSSFWorkbook(); HSSFSheet sheet = workbook.createSheet(“渠道列表”); List<ChannelPuting> listChannelPuting = ch

將資料庫查詢資料封裝到XML檔案中，進行格式化處理，並進行加密操作，和解密操作

1.pom檔案 <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <maven.compiler.source>1.7&l

將資料庫的資料轉換為excel檔案下載到本地的方法中遇到的困難及解決方案

以下是將資料庫的資料轉換為excel檔案下載到本地的方法 @Autowired private BooksService booksService; @RequestMapping("/downloadBooksExcel") public void down

logstash 將資料庫中的經緯度 轉化成 geo_point 型別

最近在使用ELK工具，主要是使用kibana進行資料視覺化，該工具非常方便，牆裂推薦！！！ 要使用coordinate map時，需要將資料轉換成它需要的geo_point型別，網上有很多使用geoip外掛將ip轉換成經緯度的教程，這裡沒有ip，只有經緯度資料。 下圖

將資料庫中的密碼加密

package com.test.util; /**  * 使用MD5演算法對字串進行加密的工具類。 MD5即Message-Digest  * Algorithm5(資訊-摘要演算法5)，是一種用於產生數字簽名的單項雜湊演算法， 這個演算法是不可逆的，  * 也就是說即使

怎樣將資料庫的資料讀取到JTable中？

預設之前已經連線資料庫，我這個是書籍資訊讀取。 第一步：先獲取資料資訊，就相當於用SQL語言獲取資訊。 第二步：將獲取的資料通過迴圈進行輸出到在容器裡的表格中，前提是先定義出JTable,在容器中顯示錶格。   public Object[][] allBook(BookI

JSON將資料庫中的date欄位轉換成時間戳

問題描述：資料庫中的date欄位：2018-09-01 12：23：23，在Java中取出該欄位，並用FastJSON將其轉化，你就會發現時間變成了148364681324這樣的時間戳，FastJSON提供瞭解決方法。 解決方法：在對應的實體類的的屬性上方定義一

如何將資料庫中的時間戳資料取出來後轉換為年月日時分秒

sql語句中使用FROM_UNIXTIME()方法，如下： select FROM_UNIXTIME(xxxxxTime/1000) from tableName where xxxx      下劃線部分為可替換內容。 打完收工，第一篇完成。就是感覺格式太醜！！！

【java 菜鳥自動化實踐之四】將資料庫查詢資料，轉為TestNG適用的物件二維陣列資料

資料庫資料：資料庫操作：import java.sql.*; import org.apache.log4j.Logger; public class MysqlConn { private static Logger log = Logger.getLogger(My