<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>产品录入</title> <link href="css/input.css" rel="stylesheet" type="text/css" /> <style type="text/css"> #search div:nth-child(1){ float: left; width: 100px; margin-right: 10px; text-align: right; } #search div:nth-child(2){ width: 150px; margin-left: 110px; } #submit input{ width: 268px; margin-top: 10px; } #error{ color: #ff0000; } </style> <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> <script type="text/javascript"> $().ready(function (){ $("#submit input").click(function (){ var productname = $("#search div:nth-child(2) input").val(); var errorMsg = ""; if (productname == ""){ errorMsg = "产品名称必须输入"; } else if (new RegExp("\\d").test(productname)){ errorMsg = "产品名称不能有数字"; } if(errorMsg != ""){ $("#error").text(errorMsg); } else{ window.location.href = "product.html"; } }) }) </script> </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>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>产品</title> <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> <style> table tr:nth-child(1) td{ height: 30px; } table tr{ height: 100px; } 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> $().ready(function (){ $("#search").click(function (){ var paras = {name:$("#product").val()}; $.ajax({ url: "http://43.136.217.18:8081/getProduct", data: paras, dataType: "JSON", type: "post", success:function(jsonData){ //document.write(JSON.stringify(jsonData)); var html = "<table border='1' cellspacing='0'>"; html += "<tr><th height='30' valign='middle' align='center'> </th><th valign='middle' align='center'>品牌</th><th valign='middle' align='center'>型号</th><th valign='middle' align='center'>价格</th></tr>"; for(var i in jsonData.data){ var item = jsonData.data[i]; html += "<tr>"; html += "<td height='100' valign='middle' align='center'><img src='http://43.136.217.18:8081/img/" + item.image + "'></td>"; html += "<td valign='middle' align='center'>" + item.brand + "</td>"; html += "<td valign='middle' align='center'><a href='http://43.136.217.18:8081/img/" + item.image +"'>" + item.model + "</a></td>"; html += "<td valign='middle' align='center'>" + item.price + "</td>"; html += "</tr>"; } html += "</table>"; $("div:last-child").html(html); } }); }); }); </script> </head> <body> <div><input type="text" id="product" placeholder="请输入产品名称"> <input type="button" id="search" value="搜索"></div> <div id="product"></div> </body> </html>