$.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="../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="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后台代码：
你需要新建一个servlet类，然后复写dopost和doget
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);//如果提交方式为GET，跳转到dopost执行
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String action = request.getParameter("action");//获取操作
if("login".equals(action)){//用户登陆
this.login(request, response);
}
}
//用户登录
private void login(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {
User f = new User();//这里我写了一个实体类，可以不用实体类，直接付给调用的函数参数即可
request.setCharacterEncoding("UTF-8");//防止乱码
f.setusername(request.getParameter("username"));
f.setpassword(request.getParameter("password"));
int r = userdao.login(f);//userdao是UserDao类的实例，在servlet的一开始生成
//r是返回的用户id，根据你自己生成的id，修改下方if判断条件
boolean flag = false;//默认登录不成功
if(r >= 0){//用户登陆成功
HttpSession session = request.getSession();
session.setAttribute("username", f.getusername());
session.setAttribute("userid", r);
session.setAttribute("identify", f.getidentify());
flag = true;
}else{
flag = false;
}
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
out.print(flag);//返回登录信息
out.flush();
out.close();
}UserDao类的login()函数实现：
public int login(User user){
int flag = -1;//flag的错误值可以随意赋，但是你要保证错误值不和你生成的id有交集
//flag错误值也可以表示多种错误，你可以在网页的js处理并展示
String sql = "SELECT * FROM User WHERE UserName='"+user.getusername()+"'";
ResultSet rs = conn.executeQuery(sql);//conn是连接数据库类的实例,这里不赘述
try{
if(rs.next()){
String pwd = user.getpassword();
int userid = rs.getInt(1);
if(pwd.equals(rs.getString(3))){
user.setidentify(rs.getInt(9));
flag = userid;
rs.last();
int rowSum = rs.getRow();
rs.first();
if(rowSum != 1){
flag = -2;
}
}else{
flag = -1;
}
}else{
flag = -1;
}
}catch(SQLException se){
se.printStackTrace();
flag = -2;
}finally{
conn.close();
}
return flag;
}了解
代码中都有注释，但是为了防止有些人看不懂，或者说是初次尝试，我还是在这里做个详细说明。（我也是初次使用）
网上有的代码都不是特别的详尽，大多告诉你ajax的格式，但没给详细的例子。我这里给出我写出来的例子，希望可以有助于初学者的理解。
-
首先，你需要写个html网页，能展示出登录的页面就算是完成第一步了。
-
然后，你需要将你写的网页数据提交到服务器，并且完成跳转和提示信息等操作，就需要利用js了。jquery提供了ajax函数，你可以利用它来实现与服务器的异步通信。代码如上。
-
其次，你在写好ajax之后，需要在后台写个处理函数，将网页传过来的数据处理，然后返回它需要的信息。首先，你要知道执行那个函数，就需要从action中获取网页提交的参数，比如说，这是个登录界面，我的action就可以这样写
aciton=login然后后台获取action，比较之后，跳转到你写好的处理函数。
-
处理函数就不多说了，获取url给的参数，然后利用sql语句，从数据库中查询比较，之后就blabla。代码如上。
-
数据库处理我有时间再写。