22-jsonp 获取360搜索的联想词

ajax不能跨域访问，只能请求同一个域下的数据和资源，如果需要跨域访问，就用到jsonp技术，它的原理是利用<script>标签可以跨域链接资源的特性。jsonp和ajax原理完全不一样，不过jquery将它们封装成同一个函数。

$.ajax({
    url:"js/data.js",
    type:"get",
    dataType:"jsonp",
    jsonCallback:"fnBack"
})

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

//data.js里面的数据：fnBack({"name":"tom","age":!8});

 

data.js:

fnback({'name':'tom'});

读取data.js的内容：

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        $.ajax({
            url:'data.js',
            type:'get',
            dataType:'jsonp',
            jsonpCallback:"fnback"
        })

        .done(function(dat){
            alert(dat.name);
        })

    </script>
</head>
<body>
    
</body>
</html>

 例子，用360搜索接口：

    <script src="js/jquery.js"></script>
    <script>
        $(function(){

            $.ajax({
                //360搜索的接口
                url:"https://sug.so.360.cn/suggest",
                type:"get",
                dataType:"jsonp",
                //搜索"a"
                data:{"word":"a",
                    //解决乱码
                    encodein:"utf-8",
                    encodeout:"utf-8"},

            })

            .done(function(dat){
                console.log(dat)
            })
            .fail(function(){
                alert("wwww")
            })

// https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=d&huid=11CjFRDwf7B9xoMvefUVffmxa8PHba%2BaQMJ5u4c97JYkE%3D
        })
    </script>

 

一个用360搜索接口的联想词获取例子：

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/jquery.js"></script>
    <script>
        $(function(){

            // https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=d&huid=11CjFRDwf7B9xoMvefUVffmxa8PHba%2BaQMJ5u4c97JYkE%3D
            

            //keyup是键盘按下时，blur是失去焦点时
            // $("#input01").blur(function(){
            $("#input01").keyup(function(){
                
                // 获取#input的值
                var $val = $(this).val()

                
                $.ajax({               
                //360搜索的接口
                url:"https://sug.so.360.cn/suggest",
                type:"get",
                dataType:"jsonp",
                //搜索"a"
                data:{"word":$val,
                    //解决乱码
                    encodein:"utf-8",
                    encodeout:"utf-8"},

            })

            .done(function(data){
                //dat是一个数组
                var dat = data.s;
                //清除上一次的数据
                $('#list1').empty()
                //循环获取数组中的数据
                for(var i=0;i<dat.length;i++)
                {
                    var $newli = $('<li>')

                    $newli.html(dat[i])

                    $newli.appendTo($('#list1'))
                }
            })
            .fail(function(){
                alert("wwww")
            })                
            })            
        })
    </script>
</head>
<body>
    <input type="text" id="input01">
    <ul id="list1"></ul>
</body>
</html>

 

posted @ 2019-04-08 09:59  greenfan  阅读(456)  评论(0)    收藏  举报