使用ajax完成登录与主页图片显示功能完成图书管理系统

效果

需要使用jqurey，两种方式导入，一种时在线引入，一种下载到本地进行引入

<script src="https://code.jquery.***/jquery-3.5.1.min.js"></script>

登录表单

<form action="/user?method=login" method="post">
    <h2>登录</h2>
    <div class="form-row">
        <label for="uname">账号</label>
        <input type="text" id="uname" name="uname" oninput="checkUsername()" onblur="ckname()" />
        <div class="error-tip" id="usernameError">请输入正确的账号</div>
        <span id="cknameResult"></span>
    </div>
    <div class="form-row">
        <label for="upwd">密码</label>
        <input type="password" id="upwd" name="upwd" oninput="checkPassword() " onblur="ckpwd()"/>
        <div class="error-tip" id="passwordError">请输入密码，长度至少6位</div>
        <span id="ckpwdResult"></span>
    </div>
    <input type="submit" value="立即登录" />
    <input type="button" value="注册" />
</form>

使用onblur对其进行失焦处理，及当点击输入框后再点击其他地方时触发函数

js函数

function ckname(){
    var uname = document.getElementById('uname').value;
    $.get("user",{"uname":uname,"method":"ckuname"},function (returnnameValue){
        var cknameResultSpan = document.getElementById('cknameResult');
        cknameResultSpan.innerHTML = returnnameValue;
        }
    )
}
function ckpwd(){
    var upwd = document.getElementById('upwd').value;
    $.get("user",{"upwd":upwd,"method":"ckupwd"},function (returnpwdValue){
            var ckpwdResultSpan = document.getElementById('ckpwdResult');
        ckpwdResultSpan.innerHTML = returnpwdValue;
        }
    )
}

结构相同解释第一个，

var uname = document.getElementById('uname').value;

通过id找到这个值，在使用value将值赋值给uname,使用get请求user路径，传递上面从输入框获取的uname（结构为key，value）传递参数在{}中，method用来判断使用哪个方法，后面的function (returnnameValue)将请求后返回的值赋值给returnnameValue，

var ckpwdResultSpan = document.getElementById('ckpwdResult');

同样通过id获取要把返回值显示的标签的id，

ckpwdResultSpan.innerHTML = returnpwdValue;

将请求响应后的值给ckpwdResultSpan进行显示

主要讲解前端如何使用后端给出代码

servlet里的方法

@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    req.setCharacterEncoding("utf-8");//请求编码
    resp.setCharacterEncoding("utf-8");
    String method = req.getParameter("method");
    System.out.println(method);
    if ("login".equals(method)) {
        login(req, resp);
    } else if ("delete".equals(method)) {
        req.getSession().removeAttribute("user");
        resp.sendRedirect("/login.jsp");
    } else if ("ckuname".equals(method)) {
        ckname(req,resp);
    } else if ("ckupwd".equals(method)) {
        ckupwd(req,resp);
    }
}

private void ckupwd(HttpServletRequest req, HttpServletResponse resp) throws IOException {
    String upwd=req.getParameter("upwd");
    User ckupwd = userDao.ckupwd(upwd);
    PrintWriter out=resp.getWriter();
    if (ckupwd!=null) {
        out.print("存在该密码");
    }else {
        out.print("不存在该密码");
    }
    out.close();
    out.flush();
}

private void ckname(HttpServletRequest req, HttpServletResponse resp) throws IOException {
    String uname = req.getParameter("uname");
    User ckuname= userDao.findByUname(uname);
    PrintWriter out = resp.getWriter();
    if (ckuname!=null) {
        out.print("存在该账号");
    }else {
        out.print("不存在该账号");
    }
    out.close();
    out.flush();
}

每次使用完out后都应该关闭，否则占用内存导致卡顿

dao里的方法

public User findByUname(String uname) {
    User user = null;
    try {
        getConn();
        String sql = "select * from tbl_user where username=? ";
        ps = conn.prepareStatement(sql);
        ps.setObject(1, uname);
        rs = ps.executeQuery();
        if (rs.next()) {
            user = new User();
            user.setId(rs.getInt("id"));
            user.setUsername(rs.getString("username"));
            user.setPassword(rs.getString("password"));
            user.setRealname(rs.getString("realname"));
            user.setAge(rs.getInt("age"));
        }
    }  catch (Exception e) {
        throw new RuntimeException(e);
    } finally {
        closeAll();
    }
    return user;
}

public User ckupwd(String upwd) {
    User user = null;
    try {
        getConn();
        String sql = "select * from tbl_user where password=? ";
        ps = conn.prepareStatement(sql);
        ps.setObject(1, upwd);
        rs = ps.executeQuery();
        if (rs.next()) {
            user = new User();
            user.setId(rs.getInt("id"));
            user.setUsername(rs.getString("username"));
            user.setPassword(rs.getString("password"));
            user.setRealname(rs.getString("realname"));
            user.setAge(rs.getInt("age"));
        }
    }  catch (Exception e) {
        throw new RuntimeException(e);
    } finally {
        closeAll();
    }
    return user;
}

主页表单

json格式

易于人阅读和编写，大部分企业都运用这种格式，大量用于前后端分离

每个key，value结束使用，分割

格式：{ “key” : value}

示例： {“name”:张三,“年龄”:20}

返回个对象集合使用【{ “key” : value}】

格式：【{ “key” : value}，{ “key” : value}】

示例： 【{“name”:张三,“年龄”:20}，{“name”:李四,“年龄”:21}，....】

servlet

@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    req.setCharacterEncoding("utf-8");
    resp.setCharacterEncoding("utf-8");
    String method = req.getParameter("method");
    if ("insert".equals(method)){
        insert(req,resp);
    } else if ("delete".equals(method)) {
        delete(req,resp);
    } else if ("updata".equals(method)) {
        update(req,resp);
    } else if ("findbyid".equals(method)) {
        findById(req,resp);
    } else if ("getall".equals(method)) {
        getall(req,resp);
    } else {
        findAll(req, resp);
    }

}

private void getall(HttpServletRequest req, HttpServletResponse resp) throws IOException {

    PrintWriter out=resp.getWriter();
    ArrayList<Book> books = bookDao.getall();
    if(books!=null) {
        String s = JSON.toJSONString(books);
        out.print(s);
    }
}

String s = JSON.toJSONString(books);

导入fastjson-1.2.21.jar，alibaba的包，使用JSON.toJSONString(books)将参数对象里的值转化为json格式返回

图书表格

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<script src="https://code.jquery.***/jquery-3.5.1.min.js"></script>
<body onload="ck()">
<script>
    function ck(){
        $.get("book",{"method":"getall"},function (book){
            var getallbook=document.getElementById("tbody")
            var str=""
            for ( var i=0;i<book.length;i++){
                str+="<tr>";
                str+="<td>"+book[i].id+"</td>";
                str+="<td>"+book[i].name+"</td>";
                str+="<td>"+book[i].price+"</td>";
                str+="<td>"+book[i].publisher+"</td>";
                str+="<td><a href='/book?method=delete&&id="+book[i].id+"'>删除</a></td>"
                href="/book?method=delete&&id=id"
                str+="<tr>";
            }
            getallbook.innerHTML=str;
        },"json")

    }
</script>
<table>
    <tr>
        <th>编号</th>
        <th>书名</th>
        <th>价格</th>
        <th>出版社</th>
        <th>操作</th>
    </tr>
    <tbody id="tbody">

    </tbody>
</table>
</body>
</html>

通过在线文档（jQuery.get(url,[data],[callback],[type]) | jQuery API 中文手册jQuery.get(url,[data],[callback],[type]) | jQuery API 中文手册jQuery.get(url,[data],[callback],[type]) | jQuery API 中文手册）看使用

url必须写，【】里的看需求

url：请求的路径

, [data]：请求的参数

, [callback]响应的参数赋值给callback

, [type]返回的数据类型，本此时用的时“json”

本页面请求在登陆解释过不再赘述，主要讲解for循环

str+="<tr>";等价于str=str+“<tr>”，for循环中将其拼接起来

str+="<td><a href='/book?method=delete&&id="+book[i].id+"'>删除</a></td>"
上面代码注意，“”中再次使用双引号需要改为的单引号，通过这个代码getallbook.innerHTML=str;将循环出的值赋给getallbook在对应的id界面进行显示

dao里的方法

public ArrayList<Book> getall() {

    ArrayList<Book> list=new ArrayList<>();
    try {

        getConn();
        String sql="select id,name,price,publisher from tbl_book ";
        ps=conn.prepareStatement(sql);
        rs=ps.executeQuery();
        while (rs.next()){
            Book book=new Book();
            book.setId(rs.getInt("id"));
            book.setName(rs.getString("name"));
            book.setPrice(rs.getDouble("price"));
            book.setPublisher(rs.getString("publisher"));
            list.add(book);
        }
    } catch (Exception e) {
        throw new RuntimeException(e);
    } finally {
        closeAll();
    }
    return  list;
}