前端ajax请求数据总结

ajax方法及跨域

$(function(){
		/*ajax*/
			
			//普通get请求
			$.ajax({
				type:"get",
				url:"http://datainfo.duapp.com/shopdata/getclass.php",
				async:true,
				success:function(data){
					console.log(JSON.parse(data))
					var data = JSON.parse(data);
					$("body").html(JSON.stringify(data));
				}
			});
			//jsonp请求
			$.ajax({
				type:"post",
				dataType:"jsonp",
				url:" http://datainfo.duapp.com/shopdata/getGoods.php",
				async:true,
				success:function(data){
					$("body").html(JSON.stringify(data));
//					console.log(data);
				}
			});
			$.getJSON("http://datainfo.duapp.com/shopdata/getBanner.php?callback=?",
				function(data){
					$("body").html(JSON.stringify(data));
					
					console.log(data)	;
				}
				
			)
		
		})

axios请求，该请求不支持跨域（作者不喜欢）

$(function(){
			//get
			axios({
				method:"get",
				url:'http://datainfo.duapp.com/shopdata/getclass.php',
				
			}).then(function(data){
				console.log(data.data);
			})
			axios({
				method:"get",
				url:'http://localhost:3000/login',
				params:{user:123},
			}).then(function(data){
				console.log(data.data);
			})
			axios.get('http://localhost:3000/login',{params:{user:456}})
			.then(function(data){
				console.log(data.data);
			})
			//post
			axios.post('http://localhost:3000/login',{user:789})
			.then(function(data){
				console.log(data.data);
			})
			//jsonp数据 axios作者不喜欢jsonp数据,所以不支持
			
			
			
			
			
			
			
		})

fetch请求，注意：默认什么方式都不写是get请求，如果post请求，需要写入{method:"post"}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.bootcss.com/fetch/2.0.4/fetch.js"></script>
		<script src="https://cdn.bootcss.com/fetch-jsonp/1.1.3/fetch-jsonp.js"></script>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		$(function(){
			//get请求    注意：默认什么方式都不写是get请求，如果post请求，需要写入{method:"post"}
			fetch('http://datainfo.duapp.com/shopdata/getclass.php')
			  .then(function(response) {
			    return response.text()
			  }).then(function(body) {
			  	console.log(JSON.parse(body));
			    document.body.innerHTML = JSON.stringify(JSON.parse(body))
			  })
			//post-------fetch不支持jsonp
			fetch('http://localhost:3000/login',{method:"post"})
			  .then(function(response) {
			    return response.text()
			  }).then(function(body) {
			  	console.log(body);
			  	console.log(JSON.parse(body));
			    document.body.innerHTML = JSON.stringify(JSON.parse(body))
			  })
			 /*可以用fetch-jsoonp,需要引入fetch-jsonp文件*/
			var url = 'http://datainfo.duapp.com/shopdata/getGoods.php';
			fetchJsonp(url, {
				 timeout: 3000,
				 jsonpCallback: 'callback'
				}).then(function(response) {
				 console.log(response.json());
				 return response.json();
				}).then(function(data){
					console.log(data);
					$('body').text(JSON.stringify(data));
				}).catch(function(e) {
				 console.log(e)
				});
			
			
			
			
		})
	</script>
</html>

fetch的具体教程可以查看Fetch进阶指南

前端ajax请求数据总结

猜你喜欢