jq-ajax实现简略信息查询

jq-ajax实现简略信息查询

<input type="text">
<div class="box"></div>
<img src="" alt="">

<style>
    input {
        position: absolute;
    }
    .box {
        width: 500px;
        height: 500px;
        border: 1px solid;
        position: absolute;
        top: 30px;
        overflow-y: auto;
    }

    img {
        position: absolute;
        left: 512px;
        top: 30px;
    }

</style>

<script src="js/jquery.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="js/template-web.js"></script>
<script type="template" id="temp">
    <ul>
        {{each a}}
            <li>
                {{$index}}
                {{$value}}
            </li>
        {{/each}}
    </ul>
</script>
<script>
    document.onkeydown = function () {
        if (event.keyCode === 13){
            $.ajax({
                url : "https://autumnfish.cn/api/hero/info",
                success : function (data) {
                    var dta = template("temp",{
                        a : [data.title,data.story]
                    });
                    console.log("dta:", dta);
                    document.querySelector(".box").innerHTML = dta;
                    document.querySelector("img").src = data.bg;
                    if(!(data instanceof Object)){
                        alert("名字错误")
                    }
                },
                data : {
                    name : $("input").val()
                },
                method : "get"
            })
        }
    };
</script>