javascript中jsonP解决跨域问题

本文通过三个示例来解释jsonp解决跨域问题

首先理解什么是跨域，简单地说就是因为JavaScript同源策略的限制，ab.com 域名下的js无法操作bc.com或是c.ab.com域名下的对象。

jsonP就是解决跨域问题的方式之一，也是最常用解决方式，json padding json补丁
jsonP并不是一种数据格式，而是将数据放在函数调用的函数参数里
那么些好相应的函数声明，就能将数据传递到前台

示例一：

在html中想要打印php数据

<script type="text/javascript">
    var hello = function(data){
        console.log(data);
    }
</script>
<script src="solve.php?cb=hello"></script>

<?php
    $cb = $_GET['cb'];
    echo $cb."('hello world')";
    //echo "hello('hello world')";
?>

上述分别为html中代码和php代码，控制台输出 hello world
向php传入，cb=hello,cb指的是hello函数名，在php中接收，所以cd只是一个变量名,php中有两种处理数据方式，
一：获取传入的函数名，然后执行函数
二：直接用函数名hello执行(事先商量好的，一般不现实)

示例二：

从网上获取数据：
如借用百度的天气API接口：此处有API链接和返回的JSON返回示例

如点击按钮想要获取对应城市的天气情况

    <select id="select">
        <option value="101240501">宜春</option>
        <option value="101210101">杭州</option>
        <option value="101190101">南京</option>
        <option value="101010100">背景</option>
    </select>
    <button id="btn">按钮</button>
    <div class="title">
        <div class="line"></div>
        <div class="titleText">天气预报</div>
        <div class="line"></div>
    </div>
    <div>
        <ul id="show">      
        </ul>
    </div>

下面我们要做的就是动态创建一个script标签，让script.src指向链接
如：

btn.onclick = function(){
        show.innerHTML = '';
        var value = select.value;     //获取对应城市的编码
        var script = document.createElement('script');
        script.src = 'http://cdn.weather.hao.360.cn/api_weather_info.php?app=hao360&_jsonp=smartloaddata&code='+value;    //传去对应城市的编码号
        document.body.appendChild(script);
    }

而需要注意的是链接中_jsonp=后面的是函数名，即_jsonp作用同示例一种cb，传去函数名从而获取到json数据data

函数本身要对数据进行如下操作：

function smartloaddata(data){
        console.log(data);     //打印数据
        var cityName = `${data.area[1][0]}`;     //利用数据获取到城市名，如北京
        console.log(cityName);
        var tag = '';    //定义空字符串
        var weather = data.weather;    //此处只获取weather中的数据
        for(var item of weather){    //遍历weather中的数据
            var date = item.date;
            var day = item.info.day;
            tag += `<li>日期：${date}</li>`;
            tag += `<li>白天天气：${day[1]}</li>`;
            tag += `<li>白天温度：${day[2]}</li>`;
            tag += `<li>白天风向：${day[3]}</li>`;
            tag += `<li>白天风速：${day[4]}</li>`;
        }
        show.innerHTML = cityName + tag;    //把获取到的数据添加到div中
    }

效果如下：

示例三：

实现动态输入框
效果如下：

此处我们分布实现，

第一步、获取网页数据

在网页中拿到一个连接，如当你输入一个w的时候在network中拿到如下连接：

var textValue = text.value;
$.ajax({
            type:'get',
            dataType:'jsonp',
            url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+textValue,
            //原连接 https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=w&json=1&p=3&sid=23519_1436_21117_22160&req=2&csor=1&cb=jQuery110205405103515367955_1505657347912&_=1505657347914
            jsonp:'cb',     //要与连接中函数之前的变量名一致，以便被网页接收
            success:function(data){      
                var str = '';     //存入ul中，方便展示
                str += '<ul>';
                for(var i = 0; i < data.s.length; i++){
                    str += '<li>';
                    str += data.s[i];
                    str += '</li>';
                }
                str += '</ul>';
                box.innerHTML = str;      //把数据添加到div中
         }
 }

第二步、思考当文字输入，显示提示信息

即添加事件

text.onkeyup = function(){}

第三步、当点击提示信息时，文字显示在输入框中

var lis = $('li');
for(var i of lis){     //遍历li
      i.onclick = function(){
              text.val($(this).html());    //点击li时，此处文字添加到输入框中
      }
}

第四步、整合

此处给提供两种方法
第一种、

var text = document.getElementById('text');
    var box = document.getElementById('box');

    text.onkeyup = function(){
        var textValue = text.value;
        $.ajax({
            type:'get',
            dataType:'jsonp',    //类型为jsonp
            url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+textValue,
            // 原链接 https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=w&json=1&p=3&sid=23519_1436_21117_22160&req=2&csor=1&cb=jQuery110205405103515367955_1505657347912&_=1505657347914
            jsonp:'cb',
            success:function(data){
                var str = '';
                str += '<ul>';
                for(var i = 0; i < data.s.length; i++){
                    str += '<li>';
                    str += data.s[i];
                    str += '</li>';
                }
                str += '</ul>';

                setTimeout(function(){
                    box.innerHTML = str;
                    var liArr = document.getElementsByTagName('li');
                    console.log(liArr);
                    $('li').each(function(){
                        this.onclick = function(){
                            text.value = this.innerHTML;
                        }
                    });
                },0)
            }
        })
    }

第二种、使用template模板

<script src="template.js"></script>
<script type="text/template" id="template">
    <ul>
        {{each s as value i}}
            <li>{{value}}</li>
        {{/each}}
    </ul>
</script>

var text = $('#text');
    var box = $('#box');

    text[0].onkeyup = function(){
        var textValue = text.val();
        $.ajax({
            type:'get',
            dataType:'jsonp',
            url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + textValue,
            jsonp:'cb',
            success:function(data){
                var dataText = data.s;
                var html = template('template',data);
                box.html(html);

                setTimeout(function(){      //添加setTimeout使上上面代码都执行完在遍历
                    var lis = $('li');
                    for(var i of lis){
                        i.onclick = function(){
                            console.log($(this).html());
                            text.val($(this).html());
                        }
                    }
                },0)
            }
        })
    }

作者：kuke_kuke
博客链接：http://blog.csdn.net/qq_33599109
欢迎关注支持，谢谢！

图一来源：http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html