模拟题代码模板

最新推荐文章于 2024-08-10 22:11:57 发布

西欢乐

最新推荐文章于 2024-08-10 22:11:57 发布

阅读量119

点赞数

文章标签： html javascript css

本文链接：https://blog.csdn.net/qq_66967137/article/details/130320149

版权

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 type="text/css">
        #search div:nth-child(1){
            float: left;
            width: 100px;
            padding-right: 10px;
            text-align: right;
        }
        #submit input{
            width: 268px;
        }
    </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 searchText = $("#search input").val();
                if(searchText == ""){
                    $("#error").text("产品名称必须输入");	//方法1
	                $("#error").css("color", "#ff0000");
                }
                //else if(/\d/.test(searchText)){	//方法a
                else if(new RegExp("\\d").test(searchText)){	//方法b
                    $("#error").html("<span style='color:#ff0000'>产品名称中不能有数字</span>");	//方法2
                }
                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>

product.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品</title>
    <style type="text/css">
        table tr td{
            height: 100px;
        }
        table tr:nth-child(1) td{
            height: 30px;
        }
        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 type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        $().ready(function () {
            $("#search").click(function () {
                $.ajax({
                    url: "http://47.108.14.103:8001/getProduct",
                    type: "POST",
                    dataType: "JSON",
                    data:{name: $("#name").val()},
                    success: function (jsonData) {
                        //document.write(JSON.stringify(jsonData));	//打印JSON字串
                        var htmlText = "<table border='1' cellspacing='0'>";
                        htmlText += "<tr>";
                        htmlText += "<th valign='middle' align='center' height='30'>&nbsp;</th>";
                        htmlText += "<th valign='middle' align='center' >品牌</th>";
                        htmlText += "<th valign='middle' align='center' >型号</th>";
                        htmlText += "<th valign='middle' align='center' >价格</th>";
                        htmlText += "</tr>";
                        //for(var i = 0; i < jsonData.data.length; i ++){	//方法1
                        for(var i in jsonData.data){	//方法2
                            htmlText += "<tr>";
                            var pitem = jsonData.data[i];
                            htmlText += "<td height='100' valign='middle' align='center'><img src='http://47.108.14.103:8001/img/" + pitem.image + "'></td>";
                            htmlText += "<td valign='middle' align='center'>" + pitem.brand + "</td>";
                            htmlText += "<td valign='middle' align='center'><a target='_blank' href='http://47.108.14.103:8001/img/" + pitem.image + "'>" + pitem.model + "</a></td>";
                            htmlText += "<td valign='middle' align='center'>" + pitem.price + "</td>";
                            htmlText += "</tr>";
                        }

                        htmlText += "</table>";
                        $("#product").html(htmlText);
                    }
                });
            });
        });
    </script>
</head>
<body>
<div><input type="text" id="name" placeholder="请输入产品名称"> <input type="button" id="search" value="搜索"></div>
<div id="product"></div>
</body>
</html>