這里我們將來實現一個使用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); } }