前端 - jsonp 跨域ajax

发布时间：2020-12-16 18:43:09 所属栏目：百科来源：网络整理

导读：jsonp 跨域ajax原理: 浏览器同源策略限制如何解决同源策略限制: 方式一:? 利用创建script块,在其中执行src属性为远程url 异域用函数(返回值) 的形式返回参数方式二: jquery方式异域用函数(返回值) 的形式返回参数 HTML代码 {#html代码开始#} input typ

jsonp 跨域ajax原理:

　　浏览器同源策略限制

如何解决同源策略限制:　　

　　方式一:?

　　　　利用创建script块,在其中执行src属性为远程url
　　　　　　　　异域用函数(返回值) 的形式返回参数　　

　　方式二:

　　　　jquery方式
　　　　异域用函数(返回值) 的形式返回参数

HTML代码

    {#html代码开始#}
        <input type="text" name="k3" value="123">
        {#利用script块方式#}
        <input type="button" onclick="b1()" value="提交1">
        {#jquery 方式#}
        <input type="button" id="bt"  value="提交2">
    {#html代码结束#}

js代码

    <script src="/static/js/jquery-1.12.4.min.js"></script>
    <script>
        {#利用script块方式#}
         function b1() {
            var tag = document.createElement("script");
            tag.src = "http://172.16.3.107:9999/jsonp?callback=func";
            document.head.appendChild(tag);
            document.head.removeChild(tag);
        }

        {#jquery 方式#}
        $(‘#bt‘).click(function () {
            $.ajax({
                    url:‘http://172.16.3.107:9999/jsonp/‘,type:‘GET‘,dataType:‘jsonp‘,jsonp:‘callback‘,jsonpCallback:‘func‘
                })});

        {#定义包裹的函数,从而获取包裹的数据信息#}
        function func(arg) {
            console.log(arg)
        }
    </script>

别人网站设置

　　将返回的数据用函数包裹(这里包括的函数从get中提取)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!