JavaWeb前后端分离使用ajax实现批量删除和显示数据

编程语言 2021-11-27 07:05:56 阅读次数: 0

1.创建一个html页面，代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>批量删除</title>

        <!--jq在线路径，需要联网-->
        <script src= "http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

        <script>
            /*复选框的统一，不需要理解 拿去用就行*/
            function allCheck(all){
                //得到所有复选框的节点
                var arr=document.getElementsByTagName("input");
                for(var i=0;i<arr.length;i++){
                    if(arr[i].type=="checkbox"){
                        arr[i].checked=all.checked;
                    }
                }
            }
            function myClick(){
                var arr=document.getElementsByName("zi");
                var b=true;
                for(var i=0;i<arr.length;i++){
                    if(!arr[i].checked){
                        b=false;
                        break;
                    }
                }
                document.getElementById("fu").checked = b;
            }

            /*上面的js代码拿着用就行，下面的需要改参数*/
            //页面加载完成后执行
            $(function (){
                //调用刷新数据的方法
                init("/CommodityController?requestType=dataList");
            })

            function init(url){
                $.ajax({
                    type:"post",
                    url:url,
                    dataType:"json",
                    success:function (data) {
                        $("#tb").empty();//将之前的数据清空
                        for(var i=0;i<data.length;i++){
                            var tr='<tr>' +
                                ' <td>'+data[i].id+'</td>' +
                                ' <td>'+data[i].name+'</td>' +
                                ' <td>'+data[i].price+'</td>' +
                                ' <td>'+data[i].stock+'</td>' +
                                ' <td>' +
                                '    <input name="zi" value="'+data[i].id+'" onclick="myClick()" type="checkbox"/>' +
                                ' </td>' +
                                ' </tr>'
                            $("#tb").append(tr);
                        }
                    }
                })
            }

            //点击批量删除按钮
            function DatchDelete(){
                //定义一个数组用来存储商品的id
                var chk_value =[];
                //循环个数组赋值
                $('input[name="zi"]:checked').each(function(){
                    chk_value.push($(this).val());
                });
                if(chk_value.length==0){//判断数组里是否有商品
                    alert("你还没有选择任何内容！");
                }else{//如果有则向后台发送ajax请求//将请求类型和数组传递到后台处理
                    $.ajax({
                        url:"/CommodityController?requestType=batchDelete&arr="+chk_value,
                        type:"post",
                        success:function (zt) {
                            alert("删除成功!");
                            //为了防止数据不刷新再调用一次更新数据的请求
                            init("/CommodityController?requestType=dataList");
                        }
                    })
                }
            }
        </script>
    </head>
    <body>
        <input type="button" value="批量删除" onclick="DatchDelete()">
        <table height="200px" width="400px" border="1px" cellpadding="0" cellspacing="0" style="text-align: center;">
            <tr>
                <th>商品编号</th><th>商品名称</th>
                <th>商品价格</th><th>商品库存</th>
                <th>
                    全选
                    <input id="fu" onclick="allCheck(this)" type="checkbox"/>
                </th>
            </tr>
            <tbody id="tb">

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

2.建一个实体类用来存储数据库数据，代码如下：

package com.gy.pojo;

public class Commodity {
    private int id    ;
    private String name	;
    private double price ;
    private int stock ;

    public Commodity() {
    }

    public Commodity(int id, String name, double price, int stock) {
        this.id = id;
        this.name = name;
        this.price = price;
        this.stock = stock;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public double getPrice() {
        return price;
    }

    public void setPrice(double price) {
        this.price = price;
    }

    public int getStock() {
        return stock;
    }

    public void setStock(int stock) {
        this.stock = stock;
    }
}

3.建立数据库连接，代码如下：

DBUtil数据连接类，不会建db.properties文档的下面文档有教程：

package com.gy.util;

import java.io.InputStream;
import java.sql.*;
import java.util.Properties;

public class DBUtil {
    private static String drivername;
    private static String url;
    private static String username;
    private static String pwd;
    //静态块代码
    static {
        try {
            InputStream is=DBUtil.class.getClassLoader().getResourceAsStream("com/gy/util/db.properties");
            //属性集的类
            Properties p=new Properties();
            p.load(is);
            drivername=p.getProperty("driver");//数据库连接池相当于driver=com.mysql.cj.jdbc.Driver

            url=p.getProperty("url");//相当于url=jdbc:mysql://127.0.0.1:3306/Book?characterEncoding=UTF-8&&serverTimezone=UTC这个

            username=p.getProperty("user");//用户名
            pwd=p.getProperty("password");//数据库连接密码
            Class.forName(drivername);
        }catch (Exception e){
            e.printStackTrace();
            System.out.println("数据库连接异常!");
        }
    }

    //封装连接数据库
    public static Connection getConn(){
        try {
            return DriverManager.getConnection(url,username,pwd);
        }catch (Exception e){
            e.printStackTrace();
        }
        return null;
    }

    //封装关闭连接
    public static void closeConn(Connection conn, PreparedStatement ps, ResultSet rs){
        if(rs!=null){
            try {
                rs.close();
            }catch (SQLException e){
                e.printStackTrace();
            }
        }
        if(ps!=null){
            try {
                ps.close();
            }catch (SQLException e){
                e.printStackTrace();
            }
        }
        if(conn!=null){
            try {
                conn.close();
            }catch (SQLException e){
                e.printStackTrace();
            }
        }
    }
}

建一个db.properties文档用来存储数据的连接信息：

driver=com.mysql.cj.jdbc.Driver//注意这里需要看jar包类型来写，不会的百度
url=jdbc:mysql://127.0.0.1:3306/数据库名?characterEncoding=UTF-8&&serverTimezone=UTC
user=root//用户名
password=12345678//密码

封装好的增，删，改代码拿着用就行：

package com.gy.dao;

import com.gy.util.DBUtil;

import java.sql.Connection;
import java.sql.PreparedStatement;

public class BaseDao {
    private Connection conn;
    private PreparedStatement ps;
    public int toUpdate(String sql,Object[] obs){
        int a=0;
        conn= DBUtil.getConn();
        try{
            ps=conn.prepareStatement(sql);
            if(obs!=null&&obs.length>0){
                for (int i=0;i<obs.length;i++){
                    ps.setObject(i+1,obs[i]);
                }
            }
            a=ps.executeUpdate();
        }catch (Exception e){
            e.printStackTrace();
        }finally {
            DBUtil.closeConn(conn,ps,null);
        }
        return a;
    }
}

3.编写数据持久层：

建一个接口：

package com.gy.dao;

import com.gy.pojo.Commodity;

import java.util.List;

public interface CommodityDao{
    //所有数据
    List<Commodity> DataList();
    //批量删除
    int BatchDelete(int[] id);
}

实现上面的接口里，面是对数据库的删除和查询：

package com.gy.dao;

import com.gy.pojo.Commodity;
import com.gy.util.DBUtil;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

public class CommodityDaoImpl extends BaseDao implements CommodityDao{

    private Connection conn;
    private PreparedStatement ps;
    private ResultSet rs;

    @Override
    public List<Commodity> DataList() {
        try {
            List<Commodity> list=new ArrayList<>();
            conn= DBUtil.getConn();
            String sql="select * from commodity";
            ps=conn.prepareStatement(sql);
            rs=ps.executeQuery();
            while (rs.next()){
                Commodity commodity=new Commodity();
                commodity.setId(rs.getInt(1));
                commodity.setName(rs.getString(2));
                commodity.setPrice(rs.getDouble(3));
                commodity.setStock(rs.getInt(4));
                list.add(commodity);
            }
            return list;
        }catch (Exception e){
            e.printStackTrace();
        }finally {
            DBUtil.closeConn(conn,ps,rs);
        }
        return null;
    }

    @Override
    public int BatchDelete(int[] id) {
        String sql="DELETE from commodity where id in (";//由于是批量删除所有我们有用in来做删除，不懂重新学一遍MySql
        for(int i=0;i<id.length;i++){
            if(id.length==1){//判断用户是单个删除还是批量删除如果是单个则不加"," 然后直接结束循环
                sql+=id[i];
                break;
            }
            sql+=id[i];
            if(i==id.length-1){//判断该数是不是最后一个，如果是则不加","号，然后直接结束循环
                break;
            }else{//否则加上","，不懂的自己断点看！
                sql+=",";
            }
        }
        sql+=")";//循环结束后集合给in结尾
        return toUpdate(sql,null);//这个是我封装我的，增，删，改的方法，等会在后面给你们
    }
}

4.编写表示层：

新建一个servlet类：

package com.gy.controller;

import com.alibaba.fastjson.JSON;
import com.gy.dao.CommodityDao;
import com.gy.dao.CommodityDaoImpl;
import com.gy.pojo.Commodity;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

@WebServlet("/CommodityController")
public class CommodityController extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String requestType=request.getParameter("requestType");
        //数据显示的请求类型
        if(requestType.equals("dataList")){
            DataList(request,response);
        }
        //批量删除请求类型
        if(requestType.equals("batchDelete")){
            BatchDelete(request,response);
        }
    }

    public void BatchDelete(HttpServletRequest request, HttpServletResponse response) throws IOException {
        //接受前端传过来的商品id
        String arr=request.getParameter("arr");//前端穿过来的是字符串类型
        //将前端穿过的字符串进行截取     不知道的可以将arr输出在控制台    split函数是截取的意思不懂得百度
        String[] id=arr.split(",");
        //定义一个int类型的到数组
        int[] sid=new int[id.length];
        //循环将 id 数组的值赋值给 sid 数组
        for (int i=0;i<id.length;i++){
            sid[i]=Integer.parseInt(id[i]);
        }

        CommodityDao dao=new CommodityDaoImpl();
        int zt=dao.BatchDelete(sid);//调用实现类的批量删除方法
        PrintWriter pw=response.getWriter();
        pw.println(zt);//是否删除告知给前端页面
        DataList(request,response);//调用DataList方法让前端可以刷新数据
        pw.close();
    }

    private void DataList(HttpServletRequest request, HttpServletResponse response) throws IOException {

        /**
         * 处理传输乱码
         */
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");

        CommodityDao dao=new CommodityDaoImpl();
        List<Commodity> dataList=dao.DataList();//调用实体类的DataList方法
        String json= JSON.toJSONString(dataList);//将list类型的数据转换为json，传给前端页面
        PrintWriter pw=response.getWriter();
        pw.println(json);//将这个json数据传递到前端
        pw.close();
    }
}

5.我的数据库

CREATE TABLE `commodity` (
  `id` int NOT NULL AUTO_INCREMENT,
  `name` varchar(255) COLLATE utf8_croatian_ci DEFAULT NULL,
  `price` double(10,2) DEFAULT NULL,
  `stock` int DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=114 DEFAULT CHARSET=utf8mb3 COLLATE=utf8_croatian_ci;

INSERT INTO `commodity` VALUES (110, '旺仔大礼包', 99.90, 99);
INSERT INTO `commodity` VALUES (111, '泡芙', 5.00, 89);
INSERT INTO `commodity` VALUES (112, '旺仔牛奶', 4.00, 100);
INSERT INTO `commodity` VALUES (113, '老坛酸菜面', 2.50, 99);

6.最后给大家看一下我的项目结构：

觉得对你有用就点个赞吧！有需要模糊查询，分页的d一下 

猜你喜欢

转载自blog.csdn.net/weixin_51229463/article/details/121550517
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022