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());
//如果数据库中不存在当前的用户名称，则返回操作码1000
if (u==null){
message = "1000";
}else {
User u2 = userDao.findUser(user);
//如果数据库中用户名或密码错误，则返回操作码2000
if (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 {
@Override
protected 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>
