Jsonp请求

最新推荐文章于 2024-05-07 08:37:45 发布

涉水的小菜叽

最新推荐文章于 2024-05-07 08:37:45 发布

阅读量313

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/xxhdcblogzh888/article/details/77070900

版权

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

该文件代码是基于百度接口的关键字检索


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

    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
    </head>

    <body>
        <input type="text" name="搜索" id="inp" />
        <div id="div" style="height:153px; overflow: hidden;"></div>
        <script type="text/javascript">
            var div = document.querySelector("#div");
            var inp = document.querySelector("#inp");
            //输入框输入时触发函数fn
            inp.addEventListener("input", fn, false);
            //回调函数，用于操作数据data
            function fm(data) {
                console.log(data);
                if(data.q == "") {
                    div.style.display = "none";
                } else {
                    div.style.display = "block";
                    for(var i = 0; i < data.s.length; i++) {
                        var p = document.createElement("p");
                        p.innerHTML = data.s[i];
                        div.insertBefore(p, div.childNodes[0]);
                    }
                }
            }
            //触发函数
            function fn() {
                var keywords = inp.value;
                //拼接一个时间戳，避免IE浏览器从缓存中获得数据而不是访问后台服务器
                var time = new Date().getTime();
                //动态创建script，进行接口的访问
                var script = document.createElement("script");
                script.src = "http://suggestion.baidu.com/su?wd=" + keywords + "&cb=fm&time=" + time; //src=接口地址；fm为后台数据回调函数名，必须知道回调函数名才能请求数据
                document.body.appendChild(script);

            }
        </script>
    </body>

</html>

效果图：
这里写图片描述

涉水的小菜叽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jsonp请求

<!doctype html><html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <input type="text" name="搜索" id="inp" /> <div id="div"
复制链接

扫一扫