jquery,ajax请求并处理跨域 - 蓝蓝设计_UI设计公司

帝皇彩票官网

jquery,ajax请求并处理跨域

2020-4-16 前端达人

自己写了段jquery的ajax请求,并输出到页面的表格中



<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jQuery实现JSONP</title>
</head>
<body>
<div id="mydiv">
	<button id="btn">点击</button>


	<div id="container">
		<!--每个条目-->
		<div class="item">
			<div class="item-title">作业名字</div>
			<div>
				<span class="item-content">创建时间</span>
				<span class="item-content">发布老师</span>
			</div>
		</div>
	</div>
</div>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
	$(function(){
		$("#btn").click(function(){

			$.ajax({
				async : true,
				url : "xxxxxxxxxxx",
				type : "GET",
				dataType : "json", // 返回的数据类型,设置为JSONP方式
				jsonp : 'callback', //指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback
				jsonpCallback: 'handleResponse', //设置回调函数名
				data : {
					q : "javascript",
					count : 1,
					city:'北京'
				},
				success: function(response, status, xhr){
					// console.log('状态为:' + status + ',状态是:' + xhr.statusText);
					// console.log(response);



					var group = response.hourly_forecast;

					console.log(group,111111111)
					console.log(group.length,222222222222)

					//拼接字符串
					var str = '';
					//对数据做遍历,拼接到页面显示
					for(var i=0;i<group.length;i++){
						str += '<div class="item">'+
								'<div class="item-title">'+ group[i].date +'</div>'+
								'<div>'+
								'<span class="item-content">'+ group[i].hum +'</span>'+
								'<span class="item-content">'+ group[i].pop +'</span>'+
								'</div>'+
								'</div>';
					}
					//放入页面的容器显示
					$('#container').html(str);





				}
			});
		});
	});

	function handleResponse(response){
		// 对response数据进行操作代码
		alert("jsonp success!");
	}
</script>
</html>


jquery中ajax处理跨域的三大方式


一、处理跨域的方式:

1。代理

2.XHR2

HTML5中提供的XMLHTTPREQUEST Level2(及XHR2)已经实现了跨域访问。但ie10以下不支持

只需要在服务端填上响应头:

header("Access-Control-Allow-Origin:*");

/*星号表示所有的域都可以接受,*/

header("Access-Control-Allow-Methods:GET,POST");

		

3.jsonP

原理:

 ajax本身是不可以跨域的, 通过产生一个script标签来实现跨域。因为script标签的src属性是没有跨域的限制的。

其实设置了dataType: 'jsonp'后,$.ajax方法就和ajax XmlHttpRequest没什么关系了,取而代之的则是JSONP协议。JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问。

 ajax的跨域写法:

(其余写法和不跨域的一样):

比如 


标签: JQuery js Ajax

Powered by sitemap
大象彩票APP 博发彩票开奖 帝皇彩票开奖 博发彩票登陆 大象彩票APP 广西快3走势 吉利彩票登陆 吉利彩票计划 帝皇彩票 帝皇彩票官网