利用ajax和Java实现前后台交互的异步处理，登录为例

以登录为例，基于Java的DAO模式，实现ajax的前后台的简单交互，实现不用页面跳转而实现提示信息的显示。

1.JavaBean层

package demo.bean;

public class User {
private int id;
private String username;
private String password;
public int getId() {
	return id;
}
public void setId(int id) {
	this.id = id;
}
public String getUsername() {
	return username;
}
public void setUsername(String username) {
	this.username = username;
}
public String getPassword() {
	return password;
}
public void setPassword(String password) {
	this.password = password;
}
public User(int id, String username, String password) {
	super();
	this.id = id;
	this.username = username;
	this.password = password;
}
public User(String username, String password) {
	super();
	this.username = username;
	this.password = password;
}
public User(){
	
}
}

2.DAO实现类层

DAO接口层此处省略，此处实现登录的数据操作。

public class UserDaoImpl implements UserDao{
	@Override
	public boolean login(String username, String password) {
		Connection conn=DBUtil.getConnection();
		boolean flag = false;
		try {
			String sql="select * from user where username='"+ username + "'and password='"+password+"'";
			Statement st=(Statement) conn.createStatement();
			ResultSet rSet=st.executeQuery(sql);
			while(rSet.next()){
				User user=new User();
				user.setId(rSet.getInt("id"));
				user.setUsername(rSet.getString("username"));
				user.setPassword(rSet.getString("password"));
				System.out.println(user.getUsername());
				flag=true;
			}
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return flag;
	}
	}

3.servlet层

访问路径名称 User_Servlet

package demo.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.Enumeration;

import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import javax.servlet.http.HttpSessionContext;
import javax.websocket.Session;

import demo.dao.UserDao;
import demo.dao.impl.UserDaoImpl;

/**
 * Servlet implementation class User_Servlet
 */
@WebServlet("/User_Servlet")
public class User_Servlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

    public User_Servlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		PrintWriter pWriter=response.getWriter();
		String username=request.getParameter("username");
		String password=request.getParameter("password");
		boolean flag=new UserDaoImpl().login(username, password);
		if (flag) {
			pWriter.print("登录成功");
		} else {
			pWriter.print("用户名或密码错误");
		}
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}
}

4.前台设计实现

1.界面部分

<body>
	<form action="#" method>
		<div class="div1">
			username:<input type="text" name="username" id="uname"><br><br>
			password:<input type="password" name="password" id="upwd"><br><br>
			<input type="button" value="login" id="submit"  onclick="loadXMLHttp()">	
			<br><br>
			<div id="message"><h3></h3></div>
		</div>
	</form>
</body>

2.ajax实现交互部分

<script src="<%=request.getContextPath() %>/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
	function loadXMLHttp(){
		var xmlhttp;
		var username=document.getElementById("uname").value;
		var password=document.getElementById("upwd").value;
		if(username==""&&username==null){
			alert("用户名不能为空");
		}else if(password==""&&password==null){
			alert("密码不能为空");
		}
		if(window.XMLHttpRequest){
			xmlhttp=new XMLHttpRequest();
		}else{
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlhttp.onreadystatechange=function(){
			if(xmlhttp.readyState==4&&xmlhttp.status==200){
				document.getElementById("message").innerHTML=xmlhttp.responseText;
			}
		}; 
		xmlhttp.open("post","User_Servlet",true);
		xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		xmlhttp.send("username="+username+"&password="+password);
 }
</script>

注意：1、xmlhttp.open(method,url,async)，
（1）method方法为“post”时，需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定希望发送的数据
（2）当使用 async=true 时，需规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数

5.执行结果

在这里插入图片描述
点击login不发生页面之间的跳转，直接在规定的message内显示提示信息。

大么大柚子

发布了7 篇原创文章 · 获赞 2 · 访问量 1189

私信关注