ajax实际应用

gaobaoxiong

浏览: 8653 次
性别:
来自: 上海

最近访客更多访客>>

zjjszmxy5

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ajax

ajax实际应用

以上功能的实现可以借助于Ajax。首先，登录表单中的账号和密码提交到Servlet，由Servlet调用DAO进行验证，最后根据验证结果决定跳转到某个页面显示。

由于篇幅关系，对DAO的功能进行了简化，认为账号密码相等就登录成功。

以下是LoginServlet的源代码：

LoginServlet.java

    package servlets;
    import java.io.IOException;
    import javax.servlet.RequestDispatcher;
    import javax.servlet.ServletContext;
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import javax.servlet.http.HttpSession;

    public class LoginServlet extends HttpServlet {

        public void doPost(HttpServletRequest request,
    HttpServletResponse response)
                throws ServletException, IOException {
            String account = request.getParameter("account");
            String password = request.getParameter("password");
            String loginState = "Fail";
            String targetUrl = "/loginFail.jsp";
            //认为账号密码相等就算登录成功，此处是对DAO的简化
            if(account.equals(password)){
                loginState = "Success";
                targetUrl = "/loginSuccess.jsp";
                HttpSession session = request.getSession();
                session.setAttribute("account", account);
            }
            request.setAttribute("loginState", loginState);
            ServletContext application = this.getServletContext();
            RequestDispatcher rd =
                application.getRequestDispatcher(targetUrl);
            rd.forward(request, response);
        }
    }

该Servlet中，进行了数据验证，如果登录成功，跳转到loginSuccess.jsp，登录失败，跳转到loginFail.jsp。loginSuccess.jsp的代码如下：

    loginSuccess.jsp
    <%@ page language="java" contentType="text/html; charset=gb2312"%>
    <html>
        <body>
            欢迎${account}登录成功!<BR>
            您可以选择以下功能：<BR>
            <a href="">查询学生</a><BR>
            <a href="">修改学生资料</a><BR>
            <a href="">修改用户资料</a><BR>
            <a href="">退出</a><BR>
        </body>
    </html>

此处仅仅进行模拟。loginFail.jsp的代码如下：

    loginFail.jsp
    <%@ page language="java" contentType="text/html;
    charset=gb2312"%>
    <html>
        <body>
            对不起，登录失败！<BR>
            请您检查是否：<BR>
            账号名写错<BR>
            密码写错
        </body>
    </html>

最后是login.jsp，该JSP上有一个表单，点击登录按钮，进行异步提交。代码如下：

    login.jsp
    <%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <body>
        <SCRIPT LANGUAGE="JavaScript">
            function login(){
                var account = document.loginForm.account.value;
                var password = document.loginForm.password.value;
                var xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
                var url =
    "servlet/LoginServlet?account="+account+"&password="+password;
                xmlHttp.open("post", url, true);
                xmlHttp.onreadystatechange=function() {
                    if (xmlHttp.readyState==4) {
                        resultDiv.innerHTML = xmlHttp.responseText;
                    }
                    else{
                        resultDiv.innerHTML += "正在登录，请稍候......";
                    }
                }
                xmlHttp.send();
            }
        </SCRIPT>
        欢迎登录学生管理系统. <hr>
        <div id="resultDiv">
        <form name="loginForm">
            请您输入账号:<input type="text" name="account"><BR>
            请您输入密码:<input type="password" name="password"><BR>
            <input type="button" value="登录" onclick="login()">
        </form>
        </div>
      </body>
    </html>

运行，即可得到相应的效果。

注意，此处的按钮类型千万不要写成submit，否则会造成表单提交，界面刷新，不是Ajax效果。

分享到：

jdbc mysql应用 | ajax

2013-05-12 10:01
浏览 727
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论