往年真题来看看

最新推荐文章于 2024-07-25 11:26:35 发布

caifff888

最新推荐文章于 2024-07-25 11:26:35 发布

阅读量66

点赞数

文章标签： html javascript css

本文链接：https://blog.csdn.net/caifff888/article/details/130322861

版权

<!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(){
                //一.2 数据约束验证
                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>

上面input

下面product

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品</title>
    <style>
        .tr1 th:nth-child(1){
            width: 100px;
        }
        .tr1 th:nth-child(2){
            width: 150px;
        }
        .tr1 th:nth-child(3){
            width: 150px;
        }
        .tr1 th:nth-child(4){
            width: 150px;
        }
        .tr1{
            height: 30px;
            text-align: center;
        }
        .tr_next{
            height: 100px;
            text-align: center;
        }
        .image{
            height: 100px;
            width: 100px;
        }
        .td2{
            width: 150px;
        }
        .td4{
            width: 150px;
            background-color:#ffffd0;
        }
        .td3{
            width: 150px;
            color: #00ff00;
        }
        .td3:hover{
            color:#ff0000;
        }
        table{
            width: 550px;
        }
    </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){
                        //将json对象转成字符串打印出来(对应二.1让我们把从服务端返回的json数据粘贴到下方)
                        //document.write(JSON.stringify(jsonData));
                        //返回数据后，即粘贴完毕后注释掉即可
                        var html = "<table border='1px' align='center' valign='middle'>";//表头
                        html += "<tr class='tr1'><th>&nbsp</th><th>品牌</th><th>型号</th><th>价格</th></tr>";
                        for(var i in jsonData.data){//每循环一次就是一行,则每循环一次，html都要加一个<tr>
                            var item =  jsonData.data[i];
                            html += "<tr class='tr_next'>";
                            html += "<td><img class='image' src = 'http://43.136.217.18:8081/img/" + item.image + "'></td>";//第一列
                            html += "<td class='td2'>" + item.brand + "</td>";
                            html += "<td><a class='td3' href = 'http://43.136.217.18:8081/img/" + item.image + "'>" + item.model + "</a></td>";
                            html += "<td class='td4'>" + 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>