ajax实际应用

最新推荐文章于 2022-09-08 21:08:12 发布

小高

最新推荐文章于 2022-09-08 21:08:12 发布

阅读量150

点赞数

分类专栏： ajax 文章标签： ajax实际应用

本文链接：https://blog.csdn.net/gaobaoxionggbx/article/details/84429813

版权

ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

以上功能的实现可以借助于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="登录" οnclick="login()">
</form>
</div>
</body>
</html>

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

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

小高

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax实际应用

以上功能的实现可以借助于Ajax。首先，登录表单中的账号和密码提交到Servlet，由Servlet调用DAO进行验证，最后根据验证结果决定跳转到某个页面显示。由于篇幅关系，对DAO的功能进行了简化，认为账号密码相等就登录成功。以下是LoginServlet的源代码：LoginServlet.java package servlets; impo...
复制链接

扫一扫

专栏目录