AJAX实现跨域之Access control allow origin

AJAX实现跨域之Access control allow origin直接在你的跨域服务器上面写上以下两行代码即可：

response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST,GET");

我们这里的小demo是基于springmvc框架的。
controller类里面代码：

	@RequestMapping("/login.do")
	@ResponseBody
	public ResponseResult handleLogin(String username,@RequestParam("password")String pwd,HttpServletResponse response){
		response.setHeader("Access-Control-Allow-Origin", "*");
		response.setHeader("Access-Control-Allow-Methods", "POST,GET");
		if("root".equals(username)){
			if("1234".equals(pwd)){
				return new ResponseResult(1, "");
			}else{
				return new ResponseResult(2, "登陆失败,密码错误.");
			}
		} else {
			return new ResponseResult(2, "登陆失败,用户名不存在.");
		}
		
	}

返回值类型自定义：

package cn.tedu.ajax.entity;

import java.io.Serializable;

public class ResponseResult implements Serializable{
	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;
	private Integer state;
	private String message;
	
	public ResponseResult() {
		super();
	}
	public ResponseResult(Integer state, String message) {
		super();
		this.state = state;
		this.message = message;
	}
	public Integer getState() {
		return state;
	}
	public void setState(Integer state) {
		this.state = state;
	}
	public String getMessage() {
		return message;
	}
	public void setMessage(String message) {
		this.message = message;
	}
	public static long getSerialversionuid() {
		return serialVersionUID;
	}
	@Override
	public String toString() {
		return "ResponseResult [state=" + state + ", message=" + message + "]";
	}
	
	
	
}

前端页面使用的Jquery+AJAX,代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>LOGIN</title>

</head>
<body style="font-size:28px;">
	<fieldset style="width:40%;">
		<legend style="font-size:40px;">用户登录</legend>
		<div>用户名:</div>
		<div><input name="username" id="username"/> <span id="login_error" style="font-size:18px;color:red;"></span></div>
		<div>密码：</div>
		<div><input name="pwd" id="pwd"/></div>
		<div><input type="button" value="登录" onclick="login()"></div>
	</fieldset>
	<script type="text/javascript" src="http://localhost:8080/AJAX/js/jquery-1.10.2.min.js"></script>
	<script type="text/javascript">
		function login(){
			var u = $("#username").val();
			var p = $("#pwd").val();
			$.ajax({
				"url":"http://192.168.0.129:8080/AJAX/user/login.do",
				"data":"username="+u+"&password="+p,
				"type":"get",
				"dataType":"json",
				"success":function(json){
					if(json.state==1){
						//登陆成功
						location.href="index.html";
					}else if(json.state==2){
						//用户名错误
						alert(json.message);
					}else if(json.state==3){
						//密码错误
						alert(json.message);
					}
				}
			});
			
			
			/* $.ajax({
				url:"http://localhost:8080/AJAX/user/login.do",
				type:"get",
				data:{"username":$("#username").val(),"pwd":$("#pwd").val()},
				success:function(responseResult){//响应码=200
					if(responseResult.state==0){
						alert("登陆成功...");
						//window.location.href="http://localhost:8080/AJAX/user/index.do";
					}else{
						$("#login_error").text(responseResult.message);
					}				
				},
				error:function(){
					alert("返回失败..");
				}
			}); */
		}
		
	</script>
</body>
</html>

在这里插入图片描述
over!

AJAX实现跨域之Access control allow origin

猜你喜欢