jquery+ajax实现用户登录案例

版权声明:《==study hard and make progress every day==》 https://blog.csdn.net/qq_38225558/article/details/83826178

jQuery.get(url, [data], [callback], [type]);
    url : 待载入页面的URL地址
    data : 待发送 Key/value 参数。
    callback : 载入成功时回调函数。
    type : 返回数据的类型,xml, html, script, json, text, _default。

jQuery.post(url, [data], [callback], [type]);    -->  post提交和get提交参数一样

前台页面:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jquery+ajax实现登录</title>
		<script type="text/javascript" src="js/jquery/jquery-1.11.2.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#loginBtn").click(function(){
					var username = $("#username").val();//取值
					var password = $("#password").val();
					if(!username){
						alert("用户名必填!");
						$("#username").focus();//获取焦点
						return ;
					}
					if(!password){
						alert("密码必填!");
						$("#password").focus();//获取焦点
						return ;
					}
					//var param = "username="+username+"&password="+password;  
					var param = {"username":username,"password":password}; 
					$.post("/zq/login",param,function(result){
						if(result){
							window.location.href="/zq/success.jsp";	
						}else{
							alert("用户名或者密码错误!");
						}
					});
				});
			});
		</script>
	</head>
	<body>
		<form>
			用户名:<input type="text" id="username" name="username"><br/>
			密码:<input type="text" id="password" name="password"><br/>
			<input type="button" value="登录" id="loginBtn">
		</form>
	</body>
</html>

后台:(注意:这里我使用的是SpringMVC)

/**
 * 登录处理:
 * 注意:异步技术必须加@ResponseBody
 * @author 郑清
 */
@Controller
public class LoginController {
	
	@RequestMapping("/login")
	@ResponseBody
	public boolean login(String username,String password){
		return "admin".equals(username)&&"123456".equals(password) ? true : false;
	}
	
}

运行效果:

猜你喜欢

转载自blog.csdn.net/qq_38225558/article/details/83826178
今日推荐