$.ajax代码：
<script src="../js/jquery.mobile-1.4.5.min.js"></script>
<script language="javascript">
function login(loginform){//传入表单参数
if(loginform.username.value==""){ //验证用户名是否为空
alert("请输入用户名！");loginform.username.focus();return false;
}
if(loginform.password.value==""){ //验证密码是否为空
alert("请输入密码！");loginform.password.focus();return false;
}
var param="/wechat/UserServlet?action=login&username="+loginform.username.value+"&password="+loginform.password.value; //将登录信息连接成字符串，作为发送请求的参数
$.ajax({
url:param,
type:"POST",
dataType:"json",
contentType: 'application/x-www-form-urlencoded; charset=UTF-8',//防止乱码
success:function(data){
if(data == false){
alert("您输入的用户名或密码有错！");loginform.username.focus();return false;
}else{
window.location.href = "index.html";//跳转到主页
}
}
});
}
</script>
html代码：
<!DOCTYPE html>
<html>
<head>
<title>登陆测试</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta http-equiv="X-UA-Compatible" >
<meta name="renderer" content="webkit|ie-stand|ie-comp" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/go.html?url=../css/jquery.mobile-1.4.5.min.css">
<style>
a{margin:right;}
</style>
</head>
<body>
<div data-role="page" id="pageone" data-theme="a">
<div data-role="header">
<h1 style="font-family:'宋体',Arial, Helvetica, sans-serif;">测试登陆</h1>
</div>
<div data-role="main" class="ui-content">
<div class="ui-field-contain">
<form name="loginform" method="POST" id="loginform" action="">
<div class="ui-field-contain">
<input autocomplete="off" type="text" name="username" placeholder="用户名" data-rule="empty" data-name="帐号">
</div><br>
<div class="ui-field-contain">
<input autocomplete="off" type="password" name="password" placeholder="密码" data-rule="empty" data-name="密码">
</div><br>
<div class="ui-field-contain" align="right">
<a href="/go.html?url=register.html" rel="external" float="right">没有帐号，立即注册</a>
</div>
<div class="ui-field-contain">
<input type="submit" class="submit-btn" id="J_submit" value="登 录" onClick="login(this.form)">
</div>
</form>
</div>
</div>
</div>
</body>
</html>
java后台代码：
$.ajax代码：
<script src="../js/jquery.mobile-1.4.5.
阅读背景：
$.ajax和java后台实现用户登录的功能
来源：互联网
分享到：
