jsonp不同的请求方式

最新推荐文章于 2025-06-16 15:21:30 发布

原创最新推荐文章于 2025-06-16 15:21:30 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

web前端专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用JSONP实现跨域请求的方法，并通过一个具体的HTML页面示例展示了如何利用jQuery发起GET请求来获取外部API数据。该示例包括了直接插入script标签和通过ajax两种方式。

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src = "jquery-1.11.2.js"></script>
</head>
<body>
	<script type="text/javascript">
		function abc(data){    //回调函数 名称要与url的_jsonp一致
			console.log(data);
		}
	</script>
	
	<!-- 直接的方法，写一个script标签 直接请求数据 -->
	<!-- <script type="text/javascript" src="jsonp.php?_jsonp=abc"></script> -->
	

	<input type="button" value="获取数据" id="btn">
	<script type="text/javascript">
		//jquery创建一个script标签之后请求url
		// $("#btn").on("click",function() {
		// 	$("<script />",{
		// 		id : "newID",
		// 		src : "http://cdn.weather.hao.360.cn/api_weather_info.php?app=hao360&_jsonp=abc"
		// 	}).appendTo($("body"));
		// })


		//ajax请求jsonp url
		$.ajax({
			type : "get",
			async : false,
			url : "http://cdn.weather.hao.360.cn/api_weather_info.php?app=hao360",
			dataType : "jsonp",
			jsonp : "_jsonp",
			jsonpCallback : "abc",
			success : function(data) {
				console.log(data);
			},
			error : function () {
				alert("fail");
			}
		})
	</script>
</body>
</html>