前端模拟实战

一只fw程序猿

于 2024-03-09 13:17:32 发布

阅读量231

点赞数 5

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_61383971/article/details/130327681

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品录入</title>
    <link href="css/input.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        #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 type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        $().ready(function (){
            $("#submit input").click(function (){
                var productname = $("#search div:nth-child(2) input").val();
                var errorMsg = "";
                if (productname == ""){
                    errorMsg = "产品名称必须输入";
                }
                else if (new RegExp("\\d").test(productname)){
                    errorMsg = "产品名称不能有数字";
                }
                if(errorMsg != ""){
                    $("#error").text(errorMsg);
                }
                else{
                    window.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 type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
    <style>
        table tr:nth-child(1) td{
            height: 30px;
        }
        table tr{
            height: 100px;
        }
        table img{
            height: 100px;
            width: 100px;
        }
        table a{
            color: #00ff00;
        }
        table a:hover{
            color: #ff0000;
        }
        table tr td:nth-child(4){
            background-color: #ffffd0;
        }
    </style>
    <script>
        $().ready(function (){
            $("#search").click(function (){
                var paras = {name:$("#product").val()};
                $.ajax({
                    url: "http://43.136.217.18:8081/getProduct",
                    data: paras,
                    dataType: "JSON",
                    type: "post",
                    success:function(jsonData){
                        //document.write(JSON.stringify(jsonData));
                        var html = "<table border='1' cellspacing='0'>";
                        html += "<tr><th height='30' valign='middle' align='center'>&nbsp;</th><th valign='middle' align='center'>品牌</th><th valign='middle' align='center'>型号</th><th valign='middle' align='center'>价格</th></tr>";
                        for(var i in jsonData.data){
                            var item = jsonData.data[i];
                            html += "<tr>";
                            html += "<td height='100' valign='middle' align='center'><img src='http://43.136.217.18:8081/img/" + item.image + "'></td>";
                            html += "<td valign='middle' align='center'>" + item.brand + "</td>";
                            html += "<td valign='middle' align='center'><a href='http://43.136.217.18:8081/img/" + item.image +"'>" + item.model + "</a></td>";
                            html += "<td valign='middle' align='center'>" + 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>

一只fw程序猿

关注

5
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
前端模拟实战

<th height='30' valign='middle' align='center'> </th><th valign='middle' align='center'>品牌</th><th valign='middle' align='center'>型号</th><th valign='middle' align='center'>价格</th><input type="button" value="录入">
复制链接

扫一扫