master

分支 (1)

管理

管理

master

ajax
/
查询英雄.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        li {
            list-style: none;
        }

        .cx {
            width: 300px;
            margin: 100px auto;
            margin-bottom: 10px;
        }

        input {
            width: 200px;
            height: 40px;
            font-size: 20px;
        }

        .box {
            width: 700px;
            height: 200px;
            text-align: center;
            margin: 50px auto;
            background-color: aqua;
        }

        .box li {
            padding: 20px 0;
        }

        .box2 {
            width: 730px;
            /* height: 610px; */
            margin: 50px auto;
            background-color: aqua;
        }

        .box2 li {
            padding: 4px 0;
        }
    </style>
</head>

<body>
    <div class="cx">
        <input type="text">
        <button class="one">查询</button>
        <button class="two">查询全部</button>
    </div>
    <div class="box">
        <ul></ul>
    </div>
    <div class="box2">
        <ul></ul>
    </div>
    <script src="./js/jquery-1.12.4.js"></script>
    <script>
        $('.one').on('click', function () {
            $.get(`http://127.0.0.1:3001/getHeroSkin?heroName=${$('input').val()}`, function (result) {
                let list = result.data
                let html = ''
                if (list.name == '英雄不存在') {
                    html += '英雄不存在'
                } else if ($('input').val().trim().length == 0) {
                    html += '请输入英雄名字'
                }
                else {
                    html += `<li>英雄名字：${list.cname}</li>
                         <li>英雄皮肤：${list.skin_name}</li>`
                }
                $('.box ul').html(html)
            })
        })
        $('.two').on('click', function () {
            $.get(`http://127.0.0.1:3001/getHeroSkin`, function (result) {
                let list = result.data.list
                let html = ''
                list.forEach((item, index) => {
                    html += `<li>
                    <span>英雄名字：${item.cname};</span>
                    <span> &nbsp;&nbsp;&nbsp;英雄皮肤：${item.skin_name}</span>
                        </li>`
                })
                $('.box2 ul').html(html)
            })
        })
    </script>
</body>

</html>