当前位置：网站首页 > 热门文章 > 正文

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

bigegpt 2024-10-12 05:56 10 浏览

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

jsonp跨域获取数据小解

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

(1) jsonp原理

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

(2) jsonp实现代码

请求页面

<!DOCTYPE html>

<html>

<head>

</head>

<body>

function jsonp(data){

console.log(username)

}

</script>

</script>

$(document).ready(function(){

var url = "http://www.example.com/jsonp.php?callback=jsonp";

var script = $('<script><\/script>');

script.attr("src",url);

$("body").append(script);

});

</script>

</body>

</html>

<?php

$data = {'name': '张三'};

$callback = $_GET['callback'];

echo $callback."(".json_encode($data).")";

?php>

之后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");

}

});

</script>

总结：以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。更多精彩内容大家可以关注相关教程栏目！！！

以上就是jsonp如何进行跨域获取数据？（代码示例）的详细内容，更多请关注其它相关文章！

更多技巧请《转发 + 关注》哦！

jquery跨域

上一篇：不理解理解跨域问题?看看阿里P7架构师是如何解决跨域问题的
下一篇：前端:何为跨域，如何跨域前端做跨域

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

相关推荐

idea本地配置连接远程hadoop集群的一些网络问题解决汇总

无缓存不行?例行升级的入门级阿斯加特AN2 SSD装机点评

Ceph运维手册(基于P版本)

Docker 命令大全（docker命令大全记录表）

替代Docker build的Buildah简单介绍

Docker Desktop安装使用指南:零基础教程

大数据开发前要做什么准备?8台Hadoop服务器进行集群规划前配置

Tensorflow分类loss函数总结 tensorflow绘制loss曲线

R语言学习笔记(七) -离散型数据的模型预测2

iOS Runtime详解