jquery ajax get 跨域解决办法

Javascript piniu 886浏览 0评论

什么都不说了,直接通过代码展现,

//前端ajax 代码:

$(document).ready(function(){
   var url='http://localhost/admin/login?username=admin&password=123456&callback=?';
   $.ajax({
		 url:url,
		 type:'get',
		 dataType:'jsonp',
		 success:function(data){
		 
			if(data.status == "success"){
				alert("登录成功,用户组ID:" + data.group + ",用户组名:" + data.description);
			}else{
				alert("登录失败");
			}
		 },
		 error:function(error) {
		   alert(error);
		   console.log(error);
		 }
	});
});

jquery ajax 解决跨域问题,首先有两个部分需要注意:

1. url 需要在后面添加 &callback=?

 2.数据返回类型dataType 必须是 jsonp

//后端php代码
//登录方法(仅供简单模拟使用)

public function login(){
 
	$username = $_GET['username'];
	$password = $_GET['password'];
	$callback = $_GET['callback']; //前端ajax url中传递过来的,必须接受该参数的值,方便组合 jsonp格式的数据。
	
	
	if($username == "admin" && $password =="123456"){
		
		echo $callback . '({"status":"success", "group":101,  "description":"超级管理员"})';
	}else{
		echo $callback . '({"status":"failure"})';
		
	}
 
}

在后端需要注意一个地方 就是返回的数据的格式。

比较一下json与jsonp格式的区别:
json格式:

 {"status":"success", "group":101, "description":"超级管理员"}

jsonp格式:

callback({"status":"success", "group":101, "description":"超级管理员"})

其中这里的callback 是前端url中的callback参数的值,无需理会,按照这种格式组装即可。

至此,jquery ajax跨域问题解决了。 有不明白的地方, 欢迎留言。


发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • * 昵称:
  • * 邮箱: