java ajax

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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值