使用ajax处理用户登录时的状态变化情况(另外增加一个分页功能)

项目的目录
在这里插入图片描述
在这里插入图片描述
数据库的表
在这里插入图片描述

根据数据库的表创建对象(实体层)
在这里插入图片描述
再通过对象生成对应的javabean
然后根据需要在数据库查询的数据编写DAO层的接口
在这里插入图片描述

DAO层的接口写完以后写实现方法
直接ALT+Insert,具体的写法就是数据库的相关的增删改查的语句
在这里插入图片描述
然后在编写SERVICE层,和DAO层一样,先写接口,然后实现方法
在这里插入图片描述
接着service的实现方法
在这里插入图片描述
主要是就是实现登录的状态显示的功能,所以业务逻辑不是很复杂

然后就是servlet的编写
在这里插入图片描述
至此功能的部分就已经完成了

接下来就是关于前端页面的相关编写
在这里插入图片描述
具体代码如下:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ajax</title>
    <script>
        function myCheckName() {
            var xmlhttp;
            if (window.XMLHttpRequest) {
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp = new XMLHttpRequest();
            } else {
                // IE6, IE5 浏览器执行代码
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            var name = document.getElementById("myname").value;
            //请求方式 , 服务器地址, 异步请求
            xmlhttp.open("get", "UserServlet?method=checkName&name="+name, true);
            //post提交时.记的加上此代码
            //xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xmlhttp.send();

            xmlhttp.onreadystatechange = function () {
                console.log("状态变化情况 :" + xmlhttp.readyState)
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    //document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
                    if(xmlhttp.responseText == "true"){
                        document.getElementById("sid").innerHTML = "恭喜,可以使用";
                        document.getElementById("sid").style.color = 'green';
                    }else{
                        document.getElementById("sid").innerHTML = "用户名已经存在,请更换";
                        document.getElementById("sid").style.color = "red";
                    }
                }
            }
        }
    </script>
</head>
<body>
    用户名:<input type="text" id="myname" onblur="myCheckName()"><span id="sid"></span>

</body>
</html>

测试结果:
在这里插入图片描述
在这里插入图片描述

分页功能

数据库的表
在这里插入图片描述

Book.java

package com.softeem.bean;

public class Book {
    private Integer id;
    private String name;
    private String author;
    private Double price;
    private Integer sales;
    private Integer stock;
    private String imgPath = "static/img/default.jpg";


    public Book() {
    }

    public Book(Integer id, String name, String author, Double price, Integer sales, Integer stock, String imgPath) {
        this.id = id;
        this.name = name;
        this.author = author;
        this.price = price;
        this.sales = sales;
        this.stock = stock;
        this.imgPath = imgPath;
    }

    /**
     * 获取
     * @return id
     */
    public Integer getId() {
        return id;
    }

    /**
     * 设置
     * @param id
     */
    public void setId(Integer id) {
        this.id = id;
    }

    /**
     * 获取
     * @return name
     */
    public String getName() {
        return name;
    }

    /**
     * 设置
     * @param name
     */
    public void setName(String name) {
        this.name = name;
    }

    /**
     * 获取
     * @return author
     */
    public String getAuthor() {
        return author;
    }

    /**
     * 设置
     * @param author
     */
    public void setAuthor(String author) {
        this.author = author;
    }

    /**
     * 获取
     * @return price
     */
    public Double getPrice() {
        return price;
    }

    /**
     * 设置
     * @param price
     */
    public void setPrice(Double price) {
        this.price = price;
    }

    /**
     * 获取
     * @return sales
     */
    public Integer getSales() {
        return sales;
    }

    /**
     * 设置
     * @param sales
     */
    public void setSales(Integer sales) {
        this.sales = sales;
    }

    /**
     * 获取
     * @return stock
     */
    public Integer getStock() {
        return stock;
    }

    /**
     * 设置
     * @param stock
     */
    public void setStock(Integer stock) {
        this.stock = stock;
    }

    /**
     * 获取
     * @return imgPath
     */
    public String getImgPath() {
        return imgPath;
    }

    /**
     * 设置
     * @param imgPath
     */
    public void setImgPath(String imgPath) {
        this.imgPath = imgPath;
    }

    public String toString() {
        return "Book{id = " + id + ", name = " + name + ", author = " + author + ", price = " + price + ", sales = " + sales + ", stock = " + stock + ", imgPath = " + imgPath + "}";
    }
}

BookDao.java

package com.softeem.dao;

import com.softeem.bean.Book;

import java.util.List;

public interface BookDao {

    public int addBook(Book book);

    public int deleteBookById(Integer id);

    public int updateBook(Book book);

    public Book queryBookById(Integer id);

    public List<Book> queryBooks();

    public Integer queryForPageTotalCount();

    public List<Book> queryForPageItems(int begin, int pageSize);

    public Integer queryForPageTotalCount(String name, String author, Double min , Double max);

    public List<Book> queryForPageItems(int begin, int pageSize,String name, String author, Double min , Double max);
}

BookDaoImpl.java

package com.softeem.dao.impl;

import com.softeem.bean.Book;
import com.softeem.dao.BookDao;
import com.softeem.utils.BaseDao;

import java.util.ArrayList;
import java.util.List;

public class BookDaoImpl extends BaseDao<Book> implements BookDao {

    @Override
    public int addBook(Book book) {
        return this.update("insert into t_book values(null,?,?,?,?,?,?)",
                book.getName(),book.getPrice(),book.getAuthor(),book.getSales(),book.getStock(),book.getImgPath());
    }

    @Override
    public int deleteBookById(Integer id) {
        return this.update("delete from t_book where id = ?" , id);
    }

    @Override
    public int updateBook(Book book) {
        return this.update("update t_book set name=?,price=?,author=?,sales=?,stock=?,img_path=? where id = ?",
                book.getName(),book.getPrice(),book.getAuthor(),book.getSales(),book.getStock(),book.getImgPath(),book.getId());
    }

    @Override
    public Book queryBookById(Integer id) {
        return this.getBean("select * from t_book where id = ?" , id);
    }

    @Override
    public List<Book> queryBooks() {
        return this.getBeanList("select * from t_book order by id desc");
    }

    /**
     * 此方法用来获取表中的总记录数
     * @return
     */
    @Override
    public Integer queryForPageTotalCount() {
        return this.getValue("select count(*) from t_book").intValue();
    }

    /**
     * 分页查询方法
     * @param begin 起始下标
     * @param pageSize 显示数据条数
     * @return
     */
    @Override
    public List<Book> queryForPageItems(int begin, int pageSize) {
        return this.getBeanList("select * from t_book order by id desc limit ?,?" , begin , pageSize);
    }

    @Override
    public Integer queryForPageTotalCount(String name, String author, Double min, Double max) {
        StringBuilder sql = new StringBuilder("select count(*) from t_book where 1=1 ");
        ArrayList params = new ArrayList();//保存参数的
        if(name != null && !"".equals(name)){
            sql.append(" and name like concat('%',?,'%') ");
            params.add(name);//如果name不为空就把name保存到集合
        }
        if( author!=null && !"".equals(author) ){
            sql.append(" and author like ? ");
            params.add("%"+author+"%");//如果author不为空就把author保存到集合
        }
        //00000000000000000000000000000000000000000000000000000000
        if( (min != null && min > 0) && (max != null && max > 0)){
            sql.append(" and price BETWEEN ? AND ?");
            if( min < max ){
                params.add(min);
                params.add(max);
            }else{
                params.add(max);
                params.add(min);
            }
        }else if( min != null && min > 0 ){
            sql.append(" and price >= ?");
            params.add(min);
        }else if( max != null && max > 0 ){
            sql.append(" and price <= ?");
            params.add(max);
        }
        System.out.println(sql);
        //00000000000000000000000000000000000000000000000000000000
        return this.getValue(sql.toString(),params.toArray()).intValue();
    }

    @Override
    public List<Book> queryForPageItems(int begin, int pageSize, String name, String author, Double min, Double max) {

        StringBuilder sql = new StringBuilder("select * from t_book where 1=1 ");
        ArrayList params = new ArrayList();//保存参数的
        if(name != null && !"".equals(name)){
            sql.append(" and name like concat('%',?,'%') ");
            params.add(name);//如果name不为空就把name保存到集合
        }
        if( author!=null && !"".equals(author) ){
            sql.append(" and author like ? ");
            params.add("%"+author+"%");//如果author不为空就把author保存到集合
        }
        //00000000000000000000000000000000000000000000000000000000
        if( (min != null && min > 0) && (max != null && max > 0)){
            sql.append(" and price BETWEEN ? AND ?");
            if( min < max ){
                params.add(min);
                params.add(max);
            }else{
                params.add(max);
                params.add(min);
            }
        }else if( min != null && min > 0 ){
            sql.append(" and price >= ?");
            params.add(min);
        }else if( max != null && max > 0 ){
            sql.append(" and price <= ?");
            params.add(max);
        }
        sql.append(" order by id desc limit ? , ?");
        params.add(begin);
        params.add(pageSize);
        System.out.println(sql);
        //00000000000000000000000000000000000000000000000000000000
        return this.getBeanList(sql.toString(),params.toArray());
    }
}

BookService.java

package com.softeem.service;

import com.softeem.bean.Book;
import com.softeem.utils.Page;

import java.util.List;

public interface BookService {

    public void saveOrUpdate(Book book);

    public void deleteBookById(Integer id);

    public void updateBook(Book book);

    public Book queryBookById(Integer id);

    public List<Book> queryBooks();

    public Page<Book> page(int pageNo, int pageSize);

    public Page<Book> page(int pageNo, int pageSize,String name,String author, Double min ,Double max);
}

BookServiceImpl.java

package com.softeem.service.impl;

import com.softeem.bean.Book;
import com.softeem.dao.BookDao;
import com.softeem.dao.impl.BookDaoImpl;
import com.softeem.service.BookService;
import com.softeem.utils.Page;

import java.util.List;

public class BookServiceImpl implements BookService {

    private BookDao bookDao = new BookDaoImpl();

    @Override
    public void saveOrUpdate(Book book) {
        if( book.getId() == null || book.getId().equals("") || book.getId() == 0 ){
            //当book对象中的id是null或者是空字符串时.我们调用添加方法
            bookDao.addBook(book);
        }else{
            //否则我们调更新方法
            bookDao.updateBook(book);
        }
    }

    @Override
    public void deleteBookById(Integer id) {
        bookDao.deleteBookById(id);
    }

    @Override
    public void updateBook(Book book) {
        bookDao.updateBook(book);
    }

    @Override
    public Book queryBookById(Integer id) {
        return bookDao.queryBookById(id);
    }

    @Override
    public List<Book> queryBooks() {
        return bookDao.queryBooks();
    }

    /**
     * 分页方法
     * @param pageNo     当前页
     * @param pageSize   每页显示的条数
     * @return
     */
    @Override
    public Page<Book> page(int pageNo, int pageSize) {
        Page<Book> page = new Page<>();
        page.setPageNo(pageNo);//将参数pageNo保存到page对象
        page.setPageSize(pageSize);//将参数pageSize保存到page对象

        //获取t_book表的总记数 , 并将总记数封装到page对象中
        page.setPageTotalCount( bookDao.queryForPageTotalCount());
        //求出最大页
        if( page.getPageTotalCount() % page.getPageSize() == 0 ){
            //使用  [总记录数 / 当前页显示数量 = 总页数]
            page.setPageTotal( page.getPageTotalCount() / pageSize );
        }else{
            //如果除不净的话,就需要+1  [总记录数 / 当前页显示数量 = 总页数 + 1]
            page.setPageTotal( page.getPageTotalCount() / pageSize + 1);
        }

        //如果当前页大于最大页
        if( page.getPageNo() > page.getPageTotal() ){
            page.setPageNo(page.getPageTotal());//就将最大页设置给当前页
        }
        //如果当前页小于最小页
        if( page.getPageNo() < 1 ){
            page.setPageNo(1);//就将第一页设置给当前页
        }

        //通过当前网与每页显示数 求出 起始页
        int begin = (page.getPageNo() - 1) * page.getPageSize();
        List<Book> bookList = bookDao.queryForPageItems(begin, page.getPageSize());
        page.setItems(bookList);//将查询出来的结果集对象保存到page中
        return page;
    }

    @Override
    public Page<Book> page(int pageNo, int pageSize, String name, String author, Double min, Double max) {
        Page<Book> page = new Page<>();
        page.setPageNo(pageNo);//将参数pageNo保存到page对象
        page.setPageSize(pageSize);//将参数pageSize保存到page对象
        //获取t_book表的总记数 , 并将总记数封装到page对象中
        page.setPageTotalCount( bookDao.queryForPageTotalCount(name,author,min,max));
        //求出最大页
        if( page.getPageTotalCount() % page.getPageSize() == 0 ){
            //使用  [总记录数 / 当前页显示数量 = 总页数]
            page.setPageTotal( page.getPageTotalCount() / pageSize );
        }else{
            //如果除不净的话,就需要+1  [总记录数 / 当前页显示数量 = 总页数 + 1]
            page.setPageTotal( page.getPageTotalCount() / pageSize + 1);
        }
        //如果当前页大于最大页
        if( page.getPageNo() > page.getPageTotal() ){
            page.setPageNo(page.getPageTotal());//就将最大页设置给当前页
        }
        //如果当前页小于最小页
        if( page.getPageNo() < 1 ){
            page.setPageNo(1);//就将第一页设置给当前页
        }
        //通过当前网与每页显示数 求出 起始页
        int begin = (page.getPageNo() - 1) * page.getPageSize();
        List<Book> bookList = bookDao.queryForPageItems(begin, page.getPageSize(),name,author,min,max);
        page.setItems(bookList);//将查询出来的结果集对象保存到page中
        return page;
    }
}

BookServlet.java

package com.softeem.servlet;

import com.softeem.bean.Book;
import com.softeem.service.BookService;
import com.softeem.service.impl.BookServiceImpl;
import com.softeem.utils.BaseServlet;
import com.softeem.utils.Page;
import com.softeem.utils.WebUtils;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

@WebServlet(value="/BookServlet")
public class BookServlet extends BaseServlet {

    protected void bookPage(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        int pageNo = WebUtils.parseInt(req.getParameter("pageNo"),1);
        int pageSize = WebUtils.parseInt(req.getParameter("pageSize"),4);
        BookService bookService = new BookServiceImpl() ;

        Page<Book> page = bookService.page(pageNo, pageSize);

        resp.setContentType("text/html;charset=utf-8");

        PrintWriter out = resp.getWriter();

        List<Book> bookList = page.getItems();
        out.print("<table border='1'>");
            for (Book book : bookList) {
                out.print("<tr>" +
                            "<td>"+book.getId()+"</td>" +
                            "<td>"+book.getName()+"</td>" +
                            "<td>"+book.getPrice()+"</td>" +
                            "<td>"+book.getAuthor()+"</td>" +
                            "<td>"+book.getSales()+"</td>" +
                            "<td>"+book.getStock()+"</td>" +
                            "<td><img style='width: 30px;height: 30px;'  src='"+book.getImgPath()+"'></td>" +
                        "</tr>");
            }
            out.print("<tr><td colspan='7'><a href='javascript:mypage(1)'>首页</a>" +
                    "<a href='javascript:mypage("+(page.getPageNo()-1)+")'>上一页</a>" +
                    "<a href='javascript:mypage("+(page.getPageNo()+1)+")'>下一页</a>" +
                    "<a href='javascript:mypage("+page.getPageTotal()+")'>末页</a></td></tr>");
        out.print("</table>");

        //ajax不能进行跳转
        //req.getRequestDispatcher("/two.jsp").forward(req,resp);
        //resp.sendRedirect("two.jsp");
    }
}

bookpage.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ajax分页功能</title>
    <script>
        function mypage(pageNo) {
            var xmlhttp;
            if (window.XMLHttpRequest) {
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp = new XMLHttpRequest();
            } else {
                // IE6, IE5 浏览器执行代码
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

            //请求方式 , 服务器地址, 异步请求
            xmlhttp.open("post", "BookServlet?method=bookPage&pageNo="+pageNo, true);
            //post提交时.记的加上此代码
            xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xmlhttp.send();

            //用来处理服务影响的
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    //document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
                    document.getElementById("pei").innerHTML = xmlhttp.responseText;
                }
            }
        }
    </script>
</head>
<body onload="mypage(1)">
<input type="text">
<div id="pei" style="border: 2px red solid">

</div>
</body>
</html>

实现的效果图
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ac果

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值