jsonp通过JS源码实现和jquery实现!
2021/10/12 20:16:06
本文主要是介绍jsonp通过JS源码实现和jquery实现!,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
jsonp的源码其实不难,大概可以分为这么几步首先写个函数,然后动态创建script标签,然后赋值src属性,再将script标签添加到body里面。最后写个加载事件将地址传到函数里面即可!不知道大家发现没有,这个jsonp和ajax没有一点关系,它是通过src属性去请求响应。
<script> // 回调函数 // function run(a){ // console.log(a); // } // function addScript(src) { // // 动态创建script标签 // const script = document.createElement('script'); // // 将传过来的src属性赋值给script的src属性 // script.src = src; // // 将script标签添加到body里面 // document.body.appendChild(script); // } // window.onload = function(){ // // 传入src地址 // addScript("http://127.0.0.1:7777/1010/01.php?callback=run"); // } </script>
下面就是在jquery中使用jsonp实现跨域的操作!这里大家需要注意的是success回调函数。
<script> // 在jquery中使用jsonp实现跨域 $.ajax({ type: "get",//默认通过get方式传参 dataType: "jsonp", jsonp: "qwe",//修改回调函数的名称 url: "http://127.0.0.1:7777/1010/01.php", // 回调函数 success: function (a) { console.log(a); // console.log(JSON.parse(a)) } }) </script>
这篇关于jsonp通过JS源码实现和jquery实现!的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-21Vue3教程:新手入门到实践应用
- 2024-12-21VueRouter4教程:从入门到实践
- 2024-12-20Vue3项目实战:从入门到上手
- 2024-12-20Vue3项目实战:新手入门教程
- 2024-12-20VueRouter4项目实战:新手入门教程
- 2024-12-20如何实现JDBC和jsp的关系?-icode9专业技术文章分享
- 2024-12-20Vue项目中实现TagsView标签栏导航的简单教程
- 2024-12-20Vue3入门教程:从零开始搭建你的第一个Vue3项目
- 2024-12-20从零开始学习vueRouter4:基础教程
- 2024-12-20Vuex4课程:新手入门到上手实战全攻略