web实验

最新推荐文章于 2024-07-21 16:09:52 发布

想了半天也不知道取什么名字

最新推荐文章于 2024-07-21 16:09:52 发布

阅读量63

点赞数

分类专栏： web 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_65406049/article/details/130308795

版权

web 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

input：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品录入</title>
    <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 src="js/jquery-3.1.1.min.js"></script>
<script>
    $(function() {
        $('#submit input').on('click', function() {
            let temp = /\d/;

            if ($('#search input').val().length == 0) {
                $('#error').html('用户名不能为空');
            } else if (temp.test($('#search input').val())) {
                $('#error').html('输入不能有数字');
            } else {
                location.href = 'product.html';
            }
        })
    })
</script>
</body>
</html>

product：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    table {
        border-collapse: collapse;
    }

    th {
        height: 30px;
        text-align: center;
        line-height: 30px;
    }

    td {
        height: 100px;
        text-align: center;
        line-height: 100px;
    }

    img {
        width: 100px;
        height: 100px;
    }

    th:nth-child(1) {
        width: 100px;
    }

    th:not(:nth-child(1)) {
        width: 150px;
    }

    a {
        color: #00ff00;
    }

    a:hover {
        color: #ff0000;
    }

    tr td:nth-child(4) {
        background-color: #ffffd0;
    }
</style>
<body>
<div><input type="text" id="product" placeholder="请输入产品名称"> <input type="button" id="search" value="搜索"></div>
<div id="product">
    <table border="1">
        <thead>
            <tr>
                <th></th>
                <th>品牌</th>
                <th>型号</th>
                <th>价格</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
</body>
<script src="js/jquery-3.1.1.min.js"></script>
<script>
    $(function() {
        $('#search').on('click', function() {
            $.post(
            'http://43.136.217.18:8081/getProduct',
            {name: $('#product').val()},
            function(res) {
                console.log(res.data);

                for (let i = 0; i < res.data.length; i ++) {
                    console.log(res.data[i]);

                    let temp = $(`
                        <tr>
                            <td><img src="http://43.136.217.18:8081/img/${res.data[i].image}"></td>
                            <td>${res.data[i].brand}</td>
                            <td><a href="http://43.136.217.18:8081/img/${res.data[i].image}" target="_blank">${res.data[i].model}</a></td>
                            <td>${res.data[i].price}</td>
                        </tr>
                    `);

                    temp.appendTo('tbody');
                }
            }, 
            'json'
            );
        })
    })
</script>
</html>

input，css：

div {
    font-size: 14px;
}
#search input {
    width: 150px;
}

* {
    margin: 0;
    padding: 0;
}

#search div {
    display: inline-block;
}

#search div:nth-child(1) {
    width: 100px;
    text-align: right;
    margin-right: 10px;
}

#submit input {
    width: 267px;
}

#error {
    color: #ff0000;
}