Html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>产品录入</title>
<script src="js/jquery-3.1.1.min.js"></script>
<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>
<script>
var text = document.querySelector("input");
var btn = document.getElementsByTagName("input");
var add = document.querySelector("#error");
function containsNumber(str){
for(let i =0;i<str.length;i++){
if(Number(str[i])) return false;
}
return true;
}
btn[1].onclick = function(){
if(text.value.length <1 ){
add.innerHTML = '产品名字必须输入'
}else if(containsNumber(text.value)==false){
add.innerHTML = '产品名称中不能有数字'
}
else{
add.innerHTML ='';
window.location.href="http://127.0.0.1:8848/%E8%80%83%E8%AF%95%E6%96%87%E4%BB%B6%E5%A4%B9/product.html"
}
}
</script>
</body>
</html>
CSS：
div {
font-size: 14px;
}
#search input {
width: 150px;
margin-left: 10px;
padding-left: 0px;
}
#error{
color: #ff0000;
height: 5px;
clear: both;
}
#search div{
width: 100px;
text-align: right;
float:left;
}
#submit{
clear: both;
}
#submit input{
margin-top: 20px;
width: 266px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>产品</title>
<script src="js/jquery-3.1.1.min.js"></script>
<style>
a{
color: #00ff00;
}
a:hover{
color: #ff0000;
}
</style>
</head>
<body>
<div><input type="text" id="product" placeholder="请输入产品名称"> <input type="button" id="search" value="搜索"></div>
<div id="product"></div>
<script>
$("#search").click(function(){
$.ajax({
url:"http://43.136.217.18:8081/getProduct",
type:"post",
data:{
name:$("#product").val()
},
/*{brand: "联想", image: "thinkpad.jpeg", model: "thinkpad", price: 5000},…]
0
:
{brand: "联想", image: "thinkpad.jpeg", model: "thinkpad", price: 5*/
success:function(e){
$("div[id = 'product']").append("<table>"+"<tr>"+"<td>"+"</td>"+"<td>"+"品牌"+"</td>"+"<td>"+"型号"+"</td>"+"<td>"+"价格"+"</td>"+"</tr>"+"</table>")
for(let i = 0;i < e.data.length;i++){
var brand = e.data[i].brand
var image = e.data[i].image
var model = e.data[i].model
var price = e.data[i].price
$("table").append("<tr>"+"<td id='imageTd'>"+"<img src="+`http://43.136.217.18:8081/img/${image}`+">"+"</td>"+
"<td>"+brand+"</td>"+
"<td>"+"<a href="+`http://43.136.217.18:8081/img/${image}`+">"+model+"</td>"+
"<td style='background-color:#ffffd0'>"+price+"</td>"+"</tr>")
}
$("tr:not(:first)").css("height","100px")
$("tr:first").css("height","30px");
$("td:eq(1)").css("width","150px")
$("td:eq(2)").css("width","150px")
$("td:eq(3)").css("width","150px")
$("#imageTd").css("width","100px")
$("img").css("height","100px")
$("img").css("width","100px")
$("table").css("border-collapse","collapse")
$("table tr td").css("border-width","1px")
$("table tr td").css("border-style","solid")
$("table tr td").css("text-align","center")
$("table").css("width","550px")
}
})
})
</script>
</body>
</html>
56万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
