web考试模拟题

最新推荐文章于 2024-10-08 17:48:41 发布

qq_ouyang

最新推荐文章于 2024-10-08 17:48:41 发布

阅读量38

点赞数

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/qq_58433429/article/details/130327748

版权

input.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品录入</title>
    <link href="css/input.css" rel="stylesheet" type="text/css" />
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        #search div{
            display:inline-block;
            text-align: right;
            margin: 20px 0;;
            
        }
        #search div:nth-child(1){
            width: 100px;
            margin-right: 10px;
        }
        #search div:nth-child(2){
            width: 150px;
        }
        #submit input{
            width:260px;
        }
        #error{
            color: red;
        }
       
    </style>
</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>
    $("#submit input").click(function(){
        
        var namequerySelector=document.querySelector("#search input").value;
        console.log(namequerySelector);
        var namegetElementsByTagName=document.getElementsByTagName("input")[0].value;
        console.log(namegetElementsByTagName);
        var name=$("#search input").val();
        if(name==''){
            document.getElementById("error").innerHTML="产品名称必须输入";
            $("#error").html("产品名称必须输入");
        }

        else if(/\d/.test(name)){
            $("#error").html("产品名称不能有数字");
        }
        else{
            // 注意这个跳转，不是加上括号
            window.location.href="product.html";
        }
    })
</script>

</body>

</html>

product.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        table{
            width:500px ;
        }
        
    </style>
</head>
<body>
<div><input type="text" placeholder="请输入产品名称"> <input type="button" id="search" value="搜索"></div>
<div id="product"></div>

<script>
    $("#search").click(function(){
        $.ajax({
            type:"get",
            url:"http://114.67.241.121:8080/product/list",
            success:function(res){
                console.log(res);
                var htmlcontent=""
                htmlcontent+="<table>"
                htmlcontent+="<tr><th></th><th>品牌</th><th>型号</th><th>价格</th></tr>"
                for(var i=0;i<res.data.length;i++){
                    htmlcontent+="<tr>"
                    htmlcontent+="<td><img src='http://114.67.241.121:8080/img/"+res.data[i].image+"'></td>"
                    htmlcontent+="<td>"+res.data[i].brand+"</td>"
                    htmlcontent+="<td>"+res.data[i].model+"</td>"
                    htmlcontent+="<td>"+res.data[i].price+"</td>"
                    htmlcontent+="</tr>"
                }
                htmlcontent+="</table>"
                $("#product").html(htmlcontent)
            }
        })
    })
</script>

</body>
</html>