1.ajax定义:异步刷新技术
2.ajax语法
3.ajax实战
在不需要点击刷新按钮时，达到局部刷新的效果，如下图所示
步骤一：创建工程/包/js
步骤二：数据库/表创建
步骤三：实体类
步骤四：UserDao
package cn.kgc.dao;import cn.kgc.entity.User;public interface UserDao {//1.判断用户名称是否存在public User findByUserName(String username);//2.通过用户名和密码判断是否正确public User findUser(User user);
}
步骤五：UserDaoImpl
package cn.kgc.dao;import cn.kgc.entity.User;
import cn.kgc.util.BaseDao;import java.sql.SQLException;public class UserDaoImpl extends BaseDao implements UserDao {public User findByUserName(String username) {User user = null;rs = super.executeQuery("select * from t_user where username = ?",new Object[]{username});try {while (rs.next()){user = new User();user.setId(rs.getInt("id"));user.setUsername(rs.getString("username"));user.setUserpwd(rs.getString("userpwd"));}} catch (SQLException e) {throw new RuntimeException(e);} finally {super.closeConn();}return user;}public User findUser(User u) {User user = null;rs = super.executeQuery("select * from t_user where username = ? and userpwd=?",new Object[]{u.getUsername(),u.getUserpwd()});try {while (rs.next()){user = new User();user.setId(rs.getInt("id"));user.setUsername(rs.getString("username"));user.setUserpwd(rs.getString("userpwd"));}} catch (SQLException e) {throw new RuntimeException(e);} finally {super.closeConn();}return user;}
}
步骤六：UserService
package cn.kgc.service;import cn.kgc.entity.User;public interface UserService {public String validate(User user);
}
步骤七：UserServiceImpl
package cn.kgc.service;import cn.kgc.dao.UserDaoImpl;
import cn.kgc.entity.User;public class UserServiceImpl implements UserService{UserDaoImpl userDao = new UserDaoImpl();public String validate(User user) {String message="";//判断如果输入用户的名称存在if (user.getUsername()!=null &&!"".equals(user.getUsername())){//通过输入的用户名称 判断是否存在于数据库中User u = userDao.findByUserName(user.getUsername());//如果数据库中不存在当前的用户名称，则返回操作码1000if (u==null){message = "1000";}else {User u2 = userDao.findUser(user);//如果数据库中用户名或密码错误，则返回操作码2000if (u2==null){message = "2000";}}}return message;}
}
步骤八：UserServlet
package cn.kgc.servlet;import cn.kgc.entity.User;
import cn.kgc.service.UserServiceImpl;import javax.servlet.*;
import javax.servlet.http.*;
import java.io.IOException;public class UserServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String action = request.getParameter("action");UserServiceImpl userService = new UserServiceImpl();if (action.equals("validate")){String username = request.getParameter("username");String userpwd = request.getParameter("userpwd");User user = new User();user.setUsername(username);user.setUserpwd(userpwd);String validate = userService.validate(user);//以流的形式将操作码返回到客户端response.getWriter().write(validate);}}
}
步骤9：login.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head><title>Title</title><script type="text/javascript" src="js/jquery-1.9.1.min.js"></script><script type="text/javascript">function validate(){var flag = true;var username = $("[name=\"username\"]").val();var userpwd = $("[name=\"userpwd\"]").val();$.ajax({url:"UserServlet?action=validate",type:"post" ,data: {"username":username,"userpwd":userpwd},dataType: "text",async:false,success:function (data){$("#message1").empty();$("#message2").empty();if (data=="1000"){$("#message1").text("用户名不存在")flag = false;}else if (data=="2000"){$("#message2").text("用户名或密码错误")flag = false;}},error:function (){}})return flag;}function validateLogin() {var username = $("[name=\"username\"]").val();var userpwd = $("[name=\"userpwd\"]").val();if (username==""){alert("用户名不能为空");return false;}if (userpwd==""){alert("用户密码不能为空");return false;}var flag = validate();if (flag){window.location.href="index.jsp";}}</script>
</head>
<body><table><tr><td>用户名称</td><td><input type="text" name="username" onblur="validate()"><span id="message1" style="color: red"></span></td></tr><tr><td>用户密码</td><td><input type="text" name="userpwd" onblur="validate()" ><span id="message2" style="color: red"></span></td></tr><tr><td><input id="loginButton" type="button" value="登录" onclick="validateLogin()"></td></tr></table>
</body>
</html>
