这里我们将来实现一个使用Ajax异步实现的登录效果，话不多说，直接看代码：
登录页面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>论坛首页</title>
<link href="CSS/common.css" rel="stylesheet" type="text/css" />
<link href="CSS/denglu.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jslib/jquery.js"></script>
<script type="text/javascript" src="jslib/verify.js"></script>
</head>
<body>
<center>
<div id="body_bg">
<div id="body_all">
<div id="body_main">
<div class="dlcontent">
<div class="dlmain">
<div class="dlmain_username">
<span>账号：</span>
<span><input type="text" name="username" id="username"/></span></div>
<div class="dlmain_password">
<span>密码：</span>
<span><input type="password" name="username" id="userpassword"/></span></div>
<div class="dlmain_sm"><div id="result1"></div></div>
<div class="dlmain_xuanze">
<input type="radio" checked="checked" name="type" id="type" value="联盟会员" />
联盟会员
<input type="radio" value="论坛会员" name="type" id="type1"/>论坛会员
</div>
<div class="dlmain_queren">
<input type="reset" name="reset" style="margin-right:20px" value="重置" />
<input type="button" value="确认" onclick="verify()"/>
</div>
</div>
<div class="dlright">
<div class="dlkszc"><a href="Register.jsp">快速注册</a></div>
</div>
</div>
</div>
<div id="body_footer"></div>
</div>
</div>
</center>
</body>
</html>
实现ajax的jquery代码：
function verify(){ //alert("来了"); //解决中文乱码问题的方法 1，页面端发出的数据做一次encodeURI，服务器端使用 new String(old.getBytes("iso8859-1"),"utf-8") //var url= "AJAXServer?name="+encodeURI($("#userName").val() ) ; // encodeURI处理中文乱码问题 // 解决中文乱码问题的方法 2.页面端发出的数据做两次encodeURI处理， 服务器端用URLDecoder.decode(old,"utf-8"); var input=$("input[name='type']");//因为得不到单选钮选定的value值，所以就只能先得到所有的值，通过循环来判断 for(i=0;i<input.length;i++){ if(input[i].checked){ //alert(input[i].value); var url= "Users?name="+encodeURI(encodeURI($("#username").val() ))+"&password="+encodeURI(encodeURI($("#userpassword").val() ) )+"&type="+encodeURI(encodeURI(input[i].value) ); // encodeURI处理中文乱码问题 } } url=convertURL(url);//获取函数的返回值'login?uname='+ uname + '&psw=' + psw $.get(url,null,function(data){ $("#result1").html(data); //简洁版 }); //alert(url); } //给URL增加时间戳，骗过浏览器，不读取缓存 function convertURL(url){ //获取时间戳 var timstamp=(new Date()).valueOf(); //将时间戳信息拼接到URL上 if(url.indexOf("?")>=0){//用indexof判断该URL地址是否有问号 url=url+"&t="+timstamp; }else{ url=url+"?t="+timstamp; } return url; }
后台Servlet的处理代码：
package com.xidian.bbs.servlet; import java.io.IOException; import java.io.PrintWriter; import java.net.URLDecoder; import java.sql.Connection; import java.sql.ResultSet; import java.sql.Statement; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; import com.xidian.bbs.util.DBAccess; @SuppressWarnings("serial") public class Users extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=utf-8"); request.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8"); PrintWriter out = response.getWriter(); //1.取js中传递的参数 String name1 =request.getParameter("name"); String password1 =request.getParameter("password"); String type1 =request.getParameter("type"); // String name=new String(old.getBytes("iso8859-1"),"utf-8"); //处理中文乱码1，需和前台js文件中的encodeURI配合 String name2= URLDecoder.decode(name1,"utf-8"); //处理中文乱码2 String password2= URLDecoder.decode(password1,"utf-8"); String type2= URLDecoder.decode(type1,"utf-8"); if(name2==null||name2.length()==0){ out.println("用户名不能为空！！"); return;//不执行下面的代码 } else if(password2==null||password2.length()==0){ out.println("密码不能为空！！"); return; } //3.校验操作 Statement sql = null; ResultSet rs = null; try { Connection con = DBAccess.getConnection(); sql = con.createStatement(ResultSet.TYPE_SCROLL_SENSITIVE, ResultSet.CONCUR_UPDATABLE); if(type2.equals("联盟会员")){ HttpSession session=request.getSession(); session.setAttribute("bs_type", "联盟会员"); rs = sql.executeQuery("select * from yh_yhxx "); while(rs.next()){ String yhxx_id=rs.getString("yhxx_id"); String yhxx_pwd=rs.getString("yhxx_psw"); System.out.println(yhxx_id+" "+yhxx_pwd); //2.检查参数是否有问题 //3.校验操作 if(name2.equals(yhxx_id)&&password2.equals(yhxx_pwd)){ //4.与传统应用不同的是，这一步将用户感兴趣的数据返回给页面端。而不是将一个新的页面返回给页面端 //写法没有改变，本质变化了 session.setAttribute("username", name2); out.println("<script language='javascript'>window.location.href='index.jsp';</script>"); out.flush(); out.close(); } }}else{ HttpSession session=request.getSession(); session.setAttribute("bs_type", "论坛会员"); rs = sql.executeQuery("select * from users "); while(rs.next()){ if(name2.equals(rs.getString("userID"))&&password2.equals(rs.getString("uPwd"))&&rs.getInt("if_forbid")==0){ session.setAttribute("username", name2); out.println("<script language='javascript'>window.location.href='index.jsp';</script>"); out.flush(); out.close(); }else if(name2.equals(rs.getString("userID"))&&password2.equals(rs.getString("uPwd"))&&rs.getInt("if_forbid")==1){ out.println("该用户已被禁！！"); out.flush(); out.close(); } } } out.println("用户名或密码错误！！"); }catch(Exception e){ e.printStackTrace(); } } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }