java ajax - 技术栈

1.ajax定义:异步刷新技术

2.ajax语法

3.ajax实战

在不需要点击刷新按钮时，达到局部刷新的效果，如下图所示

步骤一：创建工程/包/js

步骤二：数据库/表创建

步骤三：实体类

步骤四：UserDao

java 复制代码

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

java 复制代码

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

java 复制代码

package cn.kgc.service;

import cn.kgc.entity.User;

public interface UserService {
    public String validate(User user);
}

步骤七：UserServiceImpl

java 复制代码

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

java 复制代码

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

html 复制代码

<%@ 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>