jsonp如何进行跨域获取数据?(代码示例)

jsonp如何进行跨域获取数据?本篇文章就给大家介绍jsonp进行跨域获取数据的方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

jsonp跨域获取数据小解

由于浏览器有同源策略,所以要想获取非同源(协议,域名,端口三者有一不同都算非同源)的页面的数据,就得进行跨域

(1) jsonp原理

由于script标签的src属性可以访问非同源的js脚本,所以通过src属性访问服务器会返回函数的js代码,而我们想要的数据就作为函数参数返回,而我们会先定义这个函数,返回的js代码就可执行

(2) jsonp实现代码

请求页面

        function jsonp(data){        console.log(username)    }    $(document).ready(function(){        var url = "http://www.example.com/jsonp.php?callback=jsonp";        var script = $('');        script.attr("src",url);        $("body").append(script);    });

登录后复制


登录后复制

之后php会返回

jsonp({    name:'niuni})

登录后复制

然后PHP返回的代码h会被请求页面的jsonp方法执行

(3)jQuery的简便jsonp跨域

    function showData (data) {        console.info(data);    }    $(document).ready(function () {        $("#btn").click(function () {            $.ajax({                url: "http://www.example.comjsonp",                type: "GET",                dataType: "jsonp",// 返回数据类型                jsonpCallback: "showData",//回调函数                // 获取数据成功就执行success函数                success: function (data) {                    console.info("data");                }            });        });    });

登录后复制

总结:以上就是本篇文章的全部内容,希望能对大家的学习有所帮助。更多精彩内容大家可以关注【创想鸟】相关教程栏目!!!

以上就是jsonp如何进行跨域获取数据?(代码示例)的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2734813.html

(0)
上一篇 2025年3月8日 01:09:37
下一篇 2025年2月19日 05:32:04

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • ajax跨域的基本流程

    1. ajax AJAX(Asynchronous JavaScript and XML),意思就是用JavaScript执行异步网络请求。主要可以通过架设代理服务器,JSONP和CORS三种方案实现跨域用JavaScript写一个完整的A…

    2025年3月8日
    200
  • 关于Jsonp跨域原理详解及简单应用

    浏览器的同源策略: 同源策略(Same Origin Policy)是一种约定,它是由Netscape提出的一个著名的安全策略,它限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。…

    2025年3月8日
    200
  • JSONP原理是什么?

    JSONP原理:首先在客户端注册一个函数;然后把函数的名字传给服务器;接着服务器成JSON数据,并以Javascript语法的方式,将数据传入客户端注册的函数中;最后在客户端注册函数中接收JSON即可。 JSONP JSONP(JSON w…

    2025年3月7日
    200
  • axios实现跨域分别是哪三种方法

    axios实现跨域的三种方法:1、在【mian.js】中引用axios,代码为【Vue.prototype.$axios = axios】;2、在页面中引用axios,代码为【this.$axios.post(‘/api/】。 …

    2025年3月7日
    200
  • 详解JS中的JSON和JSONP

    简单地使用json并不能支持跨域资源请求,为了解决这个问题,需要采用jsonp数据交互协议。众所周知,js文件的调用不受跨域与否的限制,因此如果想通过纯web端跨域访问数据,只能在远程服务器上设法将json数据封装进js格式的文件中,供客户…

    2025年3月7日
    200
  • react中怎么获取数据

    react中获取数据的方法:1、使用生命周期方法请求数据;2、使用Hooks获取数据;3、使用suspense获取数据。 本教程操作环境:windows10系统、react16,本文适用于所有品牌的电脑。 react中获取数据的方法: 1.…

    2025年3月7日
    200
  • 探索Ajax的优点与不足:全面剖析

    标题:探索Ajax的优点与不足:全面剖析,需要具体代码示例 正文: 随着Web应用的快速发展,网页的用户交互性和实时性需求越来越高。在这个背景下,Ajax(Asynchronous JavaScript and XML)作为一种前端开发技术…

    2025年3月7日
    200
  • Node.js设置允许跨域的方法

    nodejs如何设置允许跨域?下面本篇文章就来给大家介绍一下设置方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 相关推荐:《nodejs视频教程》 设置允许所有域名跨域: app.all(“*”,function(r…

    2025年3月7日
    200
  • 前端跨域解决方案有哪些

    方案:1、jsonp;2、“document.domain”和iframe;3、“location.hash”和iframe;4、“window.name”和iframe;5、postMessage;6、CORS;7、nginx代理等等。 …

    2025年3月7日
    200
  • 跨域问题的超详细全解(附示例)

    本篇文章给大家带来的内容是关于跨域问题的超详细全解(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 跨域,老生常谈的问题 简述 作为一只前端菜鸟,跨域方面只懂得JSONP和CORS,并未曾深入了解。但随着春招越来越…

    2025年3月6日
    200

发表回复

登录后才能评论