web期末模拟

小鸟游八十一花

已于 2023-04-23 16:50:06 修改

阅读量103

点赞数

文章标签： html css 前端

于 2023-04-22 20:46:24 首次发布

本文链接：https://blog.csdn.net/qq_61835683/article/details/130310047

版权

input.html

<!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;
        }
        #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>
        //所有的jquery代码从ready开始
        $().ready(function(){
            $("#submit input").click(function(){
                // 执行验证
                var errorMsg = "";
                var prodName = $("#search div:nth-child(2) input").val();
                if (prodName == ""){
                    errorMsg = "产品名称必须输入";
                }
                // 正则表达式 /\d/ test()是测试有没有
                else if (/\d/.test(prodName)){
                    errorMsg = "产品名称中不能有数字";
                }
                if (errorMsg != ""){
                    // 向error里面
                    $("#error").text(errorMsg);
                }
                else{
                    // 修改浏览器上的url
                    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>

product.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品</title>
    <style>
        #search tr{
            height: 100px;
        }
        #search tr:nth-child(1){
            height: 30px;
        }
        #search td{
            align-items: center;
        }
    </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",
                    // 从product里面拿数据
                    data: {name: $("#product").val()},
                    type: "POST",
                    dataType: "JSON",
                    success: function(jsonData){
                        //document.write(JSON.stringify(jsonData))
                        var html = "<table>";
                        html += "<tr><th>&nbsp;</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);
                    }
                })
            })
        })
    </script>
</head>
<body>
    <div><input type="text" id="product" placeholder="请输入产品名称"> <input type="button" id="search" value="搜索"></div>
    <div id="product"></div>
</body>
</html>