前端 - jsonp 跨域ajax

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中提取)

 

posted @   Anec  阅读(178)  评论(0编辑  收藏  举报
编辑推荐:
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
阅读排行:
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 《HelloGitHub》第 106 期
· 数据库服务器 SQL Server 版本升级公告
· 深入理解Mybatis分库分表执行原理
· 使用 Dify + LLM 构建精确任务处理应用
点击右上角即可分享
微信分享提示