ajax跨域，jQuery调用ajax

最新推荐文章于 2021-10-09 09:00:24 发布

不落不息

最新推荐文章于 2021-10-09 09:00:24 发布

阅读量226

点赞数

分类专栏： # ajax 文章标签： ajax jquery jsonp

本文链接：https://blog.youkuaiyun.com/weixin_43416215/article/details/108912324

版权

ajax 专栏收录该内容

7 篇文章

订阅专栏

这篇博客探讨了浏览器的同源策略及其对ajax跨域的影响。在同源策略下，ajax请求受到限制，但jQuery通过jsonp提供了一种解决方式。文章详细介绍了jQuery中ajax的jsonp数据格式，包括callback参数的使用以及如何通过jsonpCallback属性自定义回调函数名。在wamp环境下，作者展示了如何设置和测试jsonp请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景知识

同源策略

URL地址：scheme : // host : / path / ? query # fragment

scheme : 通信协议，常为http、https
host : 域名
post : 端口号，http默认为80，https默认为443【可选】
path ：路径
query ：查询参数【可选】
fragment ：信息片段，用于指定网络资源中的某片段【可选】

同源策略： 是浏览器的一种安全策略，同源指的是请求URL地址中的协议、域名和端口号都相同，一种不同就是跨域。在同源策略下，浏览器不允许ajax跨域获取服务器数据

jQuery中ajax的jsonp数据格式

wamp开启的模式下
在这里插入图片描述
callback：是后端默认的， = 后边是自动生成的方法名
可用jsonp属性值修改的callback这个默认值
jsonpCallback属性修改的是 = 后边的方法名

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>跨域</title>
	
	<script src="jquery.js"></script>
	<script type="text/javascript">
		$(function(){
			$("#btn").click(function(){
				$.ajax({
					type:'get',
					url:'http://fontend.com/data.php',//另一个测试网址
					dataType:'jsonp',
					data:{},
					jsonp:'star',//如果后端 $cd = $_GET['star'];则就需要将这里也改了，否则获取不了数据
					jsonpCallback:'yeo',//自定义 = 后边的方法名
					success:function(data){
						console.log(data);
					},
					error:function(){
						console.log("error");
					}
				});
			});
		});
	</script>
</head>
<body>
	<button id="btn">点击</button>
</body>
</html>

在wamp设置的另一个网址路径下新建文件

<?php
    $arr =array("name"=>'小红',"sex"=>"female");

    // $cd = $_GET['callback'];//callback是默认的参数
    $cd = $_GET['star'];
    // echo $cd.'('.'"hello"'.')';//传入字符串
    // echo $cd.'('.'123'.')'; //传入数字
    echo $cd.'('.json_encode($arr).')';

?>