<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>产品</title>
<style type="text/css">
table tr td{
height: 100px;
}
table tr:nth-child(1) td{
height: 30px;
}
table img{
height: 100px;
width: 100px;
}
table a{
color: #00ff00;
}
table a:hover{
color: #ff0000;
}
table tr td:nth-child(4){
background-color: #ffffd0;
}
</style>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<!-- <script type="text/javascript" src="jquery-3.1.1.min.js"></script> -->
<script type="text/javascript">
$().ready(function () {
$("#search").click(function () {
$.ajax({
// url: "http://47.108.14.103:8001/getProduct",
url: "http://114.67.241.121:8080/product/list",
data:{name: $("#name").val()},
type: "GET",
dataType: "JSON",
success: function (jsonData) {
// document.write(JSON.stringify(jsonData)); //打印JSON字串
// window.print(JSON.stringify(jsonData))
var htmlText = "<table border='1' cellspacing='0'>";
htmlText += "<tr>";
htmlText += "<th valign='middle' align='center' height='30'> </th>";
// 表示一个空白
htmlText += "<th valign='middle' align='center' >品牌</th>";
htmlText += "<th valign='middle' align='center' >型号</th>";
htmlText += "<th valign='middle' align='center' >价格</th>";
htmlText += "</tr>";
//for(var i = 0; i < jsonData.data.length; i ++){ //方法1
for(var i in jsonData.data){ //方法2
htmlText += "<tr>";
var pitem = jsonData.data[i];
htmlText += "<td height='100' valign='middle' align='center'><img src='http://47.108.14.103:8001/img/" + pitem.image + "'></td>";
htmlText += "<td valign='middle' align='center'>" + pitem.brand + "</td>";
htmlText += "<td valign='middle' align='center'><a target='_blank' href='http://47.108.14.103:8001/img/" + pitem.image + "'>" + pitem.model + "</a></td>";
htmlText += "<td valign='middle' align='center'>" + pitem.price + "</td>";
htmlText += "</tr>";
}
htmlText += "</table>";
$("#product").html(htmlText);
}
});
});
});
</script>
</head>
<body>
<div>
<input type="text" id="name" placeholder="请输入产品名称"> <input type="button" id="search" value="搜索">
</div>
<div id="product"></div>
</body>
</html>
5696
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
