intput.html
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>产品录入</title> <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="录入"></div> </body> </html> <script src="./js/jquery-3.1.1.min.js"></script> <script> $("#submit input").click(function () { let name = $("#search > div:nth-child(2) input").val(); let verifyIfContainNum = /\d/; if (name == "") { $("#error").html("请输入有效数据"); } else if (verifyIfContainNum.test(name)) { $("#error").html("请输入有效数据"); } else { location.replace("product.html"); } }); </script> <style> #search>div:nth-child(1) { float: left; width: 100px; text-align: right; margin-right: 10px; } #submit input { width: 268px; } #error { color: #ff0000; } </style>
product.html
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>产品</title> </head> <body> <div><input type="text" placeholder="请输入产品名称"> <input type="button" id="search" value="搜索"></div> <div id="product"></div> </body> </html> <script src="./js/jquery-3.1.1.min.js"></script> <script> $(document).ready(function () { getDataSet(); }); function getDataSet() { $("body").on("click", "#search", function () { $.ajax({ type: "get", url: "http://114.67.241.121:8080/product/list", complete: function (data) { let dataSet = data.responseJSON.data; $("#product").empty(); $("#product").append(buildTableContent(dataSet)); }, }); }); } function buildTableContent(dataSet) { let tableContent = "<table><tr><th></th><th>品牌</th><th>型号</th><th>价格</th></tr>"; for (let i = 0; i < dataSet.length; i++) { tableContent += "<tr>"; tableContent += "<td>" + "<img src='http://114.67.241.121:8080/img/" + dataSet[i].image + "'>" + "</td>"; tableContent += "<td>" + dataSet[i].brand + "</td>"; tableContent += "<td>" + "<a target='_blank' href='http://114.67.241.121:8080/img/" + dataSet[i].image + "'>" + dataSet[i].model + "</a></td>"; tableContent += "<td>" + dataSet[i].price + "</td>"; tableContent += "</tr>"; } tableContent += "</table>"; return tableContent; } </script> <style> th { height: 30px; } td { height: 100px; } table { width: 550px; text-align: center; vertical-align: middle; } img { width: 100px; height: 100px; } tr th:nth-child(1) { width: 100px; } tr td:nth-child(1) { width: 100px; } tr td:nth-child(1)~td { width: 150px; } a { color: #00ff00; } a:hover { color: #ff0000; } tr th:nth-child(4) { background-color: #ffffd0; } tr td:nth-child(4) { background-color: #ffffd0; } table, th, td { border: 1px solid; border-collapse: collapse; } </style>