<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>产品</title>
<script src="js/jquery-3.1.1.min.js"></script>
<style>
table {
border: 1px solid #000;
border-collapse: collapse;
width: 550px;
}
th {
height: 30px;
text-align: center;
vertical-align: middle;
border: 1px solid #000;
}
td {
height: 100px;
text-align: center;
vertical-align: middle;
border: 1px solid #000;
}
img {
height: 100px;
width: 100px;
}
a {
color: #00ff00;
}
a:hover {
color: #ff0000;
}
tr th:nth-child(4) {
background-color: #ffffd0;
}
tr td:nth-child(4) {
background-color: #ffffd0;
}
tr th:nth-child(1) {
width: 100px;
}
tr th:nth-child(2) {
width: 150px;
}
tr th:nth-child(4) {
width: 150px;
}
</style>
</head>
<body>
<div><input type="text" placeholder="请输入产品名称"> <input type="button" id="search" value="搜索" onclick="loaddata()">
</div>
<div id="product"></div>
<script>
$(function () {
$.ajax({
type: "get",
url: "http://114.67.241.121:8080/product/list",
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (res) {
console.log(res)
let htmlContent = "";
htmlContent += "<table><tr>"
htmlContent += "<th></th>"
htmlContent += "<th>品牌</th>"
htmlContent += "<th>型号</th>"
htmlContent += "<th>价格</th>"
htmlContent += "</tr>"
for (let i = 0; i < res.data.length; i++) {
htmlContent += "<tr>"
htmlContent += "<td><img src='http://114.67.241.121:8080/img/" + res.data[i].image + "'></td>"
htmlContent += "<td>" + res.data[i].brand + "</td>"
htmlContent += "<td> <a href='http://114.67.241.121:8080/img/" + res.data[i].image + "'>" + res.data[i].model + "</a></td>"
htmlContent += "<td>" + res.data[i].price + "</td>"
htmlContent += "</tr>"
}
htmlContent += "</table>";
document.getElementById("product").innerHTML = htmlContent
}
})
})
</script>
</body>
</html>
