基于jquery+servlet实现Ajax效果

这里我们将来实现一个使用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="联盟会员" />
                                    联盟会员    
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <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);
    }
}

posted on 2012-04-19 11:12 发表是最好的记忆阅读(18856) 评论(0) 编辑收藏举报