开卷资料3

最新推荐文章于 2024-05-21 18:11:13 发布

lllAJING

最新推荐文章于 2024-05-21 18:11:13 发布

阅读量40

点赞数

文章标签： html json css

本文链接：https://blog.csdn.net/lllAJING/article/details/130319265

版权

input.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>产品录入</title>
		<style>
			#search div:first-child {
				float: left;
				width: 100px;
				text-align: right;
				margin-right: 10px;
			}

			#submit input {
				margin-top: 15px;
				width: 268px;
			}

			#error {
				color: #ff0000;
			}
		</style>
		<link href="css/input.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<div id="search">
			<div>产品名称</div>
			<div><input type="text" placeholder="请输入产品名称"></div>
		</div>
		<div id="error"></div>
		<div id="submit"><input type="button" value="录入" onclick="checkdata()"></div>

		<script>
			function checkdata() {
				let name = document.getElementsByTagName("input")[0].value
				if (name == "") {
					document.getElementById("error").innerHTML = "请输入产品名称"
				} else if (/\d/.test(name)) {
					document.getElementById("error").innerHTML = "产品名称中不能有数字"
				} else {
					window.location.href = "product.html"
				}
			}
		</script>
	</body>
</html>

product.html

<!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>