360搜索联想词(jquery jsonp ajax)

最新推荐文章于 2024-09-12 18:22:06 发布

de20050138

最新推荐文章于 2024-09-12 18:22:06 发布

阅读量217

点赞数

文章标签： jquery html 前端

本文链接：https://blog.csdn.net/de20050138/article/details/107693235

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--导入jquery  -->
    <script src="../js/jquery-1.12.4.min.js"></script>
    <script>
        $(function name(params) {
            //input propertychange change 监测输入框值变化
            $("#txt").bind("input propertychange change", function (event) {
                var $val=$(this).val();
                $.ajax({
                	//请求的地址
                    url: "https://sug.so.360.cn/suggest",
                    //请求的方式
                    type: "get",
                    //返回的数据格式
                    dataType: "jsonp",

                    // data 设置发送给服务器的数据
                     data: {
                        "word": $val,
                    },

                })
                 .done(function name(data) {
                        // 清空元素里面的内容
                        $('#list').empty();
                        //将返回的数据中的result读取出来
                        var dat = data.result;
                        for (var i = 0; i < dat.length; i++) {
                        //{word: "阿里巴巴1688批发网官网"}  读取字典中word值
                             $('#list').append("<li>"+dat[i].word+"</li>");
                        }
                        console.log(data)
                    })

                    .fail(function name(data) {
                        alert("服务器超时")
                    })



            })
        })

    </script>
</head>
<body>
    <!-- https://sug.so.360.cn/suggest/word?callback=suggest_so&format=json&encodein=utf-8&encodeout=utf-8&word=哈哈方&_jsonp=suggest_so -->
    <input type="text" name="" id="txt" placeholder="请要联想的输">
    <ul id="list"></ul>
    
</body>
</html>