模拟题设计t

最新推荐文章于 2024-07-25 11:52:08 发布

摸鱼徐123

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量75

点赞数

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/m0_62412848/article/details/130324133

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>产品录入</title>
<link href="css/input.css" rel="stylesheet" type="text/css" />
<style>
   #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 src="js/jquery-3.1.1.min.js"> </script>
<script>
   $().ready(function(){
       $("#submit input").click(function(){
           var prodName = $("#search div:nth-child(2) input").val();
           var errorMsg = "";
           if(prodName==""){
               errorMsg = "产品名称中必须输入";

           }
           else if(/\d/.test(prodName)){
               errorMsg = "产品名称中不能有数字";
           }

           if(errorMsg != ""){
               $("#error").text(errorMsg);
           }
           else{
               document.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 src="js/jquery-3.1.1.min.js"></script>
   <style>
       #search div{

       }
   </style>
   <script src="js/jquery-3.1.1.min.js"></script>
   <script>
       $().ready(function(){
           $("#search").click(function(){
               $.ajax({
                   url:"http://43.136.217.18:8081/getProduct",
                   data:{name: $("#product").val()},
                   type:"POST",
                   dataType:"JSON",
                   success: function(jsonData){
                       //跟上面的data不一样
                       //JSON对象转成字符串打印出来
                       //document.write(JSON.stringify(jsonData));

                       var html = "<table>";
                       html += "<tr><th> <th><th>品牌<th><th>型号<th><th>价格<th></tr>";

                       for(var i in jsonData.data){
                           var item = jsonData.data[i];
                           html += "<tr>";
                           html += "<td><img src='http://43.136.217.18:8081/img/"+item.image+"'></td>";
                           html += "<td>"+ item.brand + "</td>";
                           html += "<td><a href = 'http://43.136.217.18:8081/img/"+item.image+"'>"+ item.model + "</a></td>";
                           html += "<td>"+ item.price + "</td>";

                           html += "</tr>";
                       }
                       html += "</table>";
                       $("div:last-child").html(html);
                       //考试可能出现的内容：继续为动态渲染的元素添加事件
                       $('.image').on("click",function(){

                       });
                   }
               });
           });
       });
   </script>
</head>
<body>
<div><input type="text" id="product" placeholder="请输入产品名称"> <input type="button" id="search" value="搜索"></div>
<div id="product"></div>
</body>
</html>