前端模拟实验

最新推荐文章于 2024-05-20 22:14:20 发布

卖菜不涨价

最新推荐文章于 2024-05-20 22:14:20 发布

阅读量112

点赞数

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

本文链接：https://blog.csdn.net/usiehheu/article/details/130323801

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

一、效果图
二、代码
- 1.intput.html
- 2.product.html

一、效果图

在这里插入图片描述

二、代码

1.intput.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;
            text-align: right;
        }
        #submit input{
            margin-top: 6px;
            width: 267px;
        }
        #error{
            color: #ff0000;
        }
    </style>
    <script src="./js/jquery-3.1.1.min.js"></script>

    <script>
        $().ready(function(){
            $('#submit input').click(function(){
                var name=$('#search div:nth-child(2) input').val();
                var error='';
                if (name==''){
                    error='产品名称不能为空';
                }
                else if(/\d/.test(name)){
                    error='产品名称中不能有数字'
                }
                if(error!=''){
                    $('#error').text(error);
                }
                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>

2.product.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品</title>
    <style>
        th:nth-child(1){
            width: 100px;
            height: 30px;
        }
        th:nth-child(2){
            width: 150px;
            height: 30px;
        }
        th:nth-child(3){
            width: 150px;
            height: 30px;
        }
        th:nth-child(4){
            width: 150px;
            height: 30px;
        }
        img{
            width: 100px;
            height: 100px;
        }
        td:nth-child(2){
            text-align: center;
            width: 150px;
            height: 100px;
        }
        td:nth-child(3){
            text-align: center;
            width: 150px;
            height: 100px;
        }
        td:nth-child(3) a{
            color: #00ff00;
        }
        td:nth-child(3) a:hover{
            color: #ff0000;
        }
        td:nth-child(4){
            text-align: center;
            width: 150px;
            height: 100px;
            background-color:cornsilk;
        }
        table{
            border-collapse: collapse;/* 合并边框 */
        }
        th,td{
            border: 2px solid #505250;
        }
    </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',
                    type:'post',
                    data:{name:$('#product').val()},
                    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);
                    },
                    Error:function(){
                        alert('数据加载失败');
                    }
                });
            });
        });
    </script>
</head>
<body>
<div><input type="text" id="product" placeholder="请输入产品名称"> <input type="button" id="search" value="搜索"></div>
<div id="product"></div>
</body>
</html>