2022/3/27 使用Ajax完成异步增删改查(模糊查询+分页)

最新推荐文章于 2024-02-17 16:15:56 发布
最新推荐文章于 2024-02-17 16:15:56 发布
阅读量2.5k 收藏 10
点赞数 5
文章标签： ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Abcdzzr/article/details/123778941
版权

目录

js代码：

servlet代码：

Dao层实现类代码：

service层代码：

运行结果：

        1.首页界面

         2.分页后界面

         3.增加后

         4.模糊查询后

         5.修改界面

        6.删除界面 

js代码：

<%@ page import="Service.impl.BananaServiceimpl" %>
<%@ page import="Service.BananaService" %>
<%@ page import="java.util.List" %>
<%@ page import="entity.banana" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <style>
      table,form,h1{
        margin: 0px auto;
        text-align: center;
      }
      *{
        text-align: center;
      }
    </style>
    <script src="js/jquery.js"></script>

  </head>
  <body>
  <h1>香蕉管理系统</h1>
  请输入香蕉名称：<input type="text" id="uname"/><br>
  <button onclick="ccc()">点我查询</button>
    <table border="1">
      <tr>
        <td>香蕉编号</td>
        <td>香蕉名称</td>
        <td>香蕉价格</td>
        <td>香蕉颜色</td>
        <td>种植时间</td>
        <td>操作</td>
      </tr>
    </table>
  <button value="0"class="but">首页</button>
  <button value="-1"class="but">上一页</button>
  <button value="1"class="but">下一页</button>
  <button value="9999"class="but">尾页</button>
  <div>
    <form>
      香蕉编号：<input type="text" name="bid"><br>
      香蕉名称：<input type="text" name="bname"><br>
      香蕉价格：<input type="text" name="bprice"><br>
      香蕉颜色：<input type="text" name="bcolor"><br>
      种植时间：<input type="date" style="width: 171px" name="btime"><br>
      <button type="button" onclick="insert_update()">提交</button>
    </form>
  </div>
  <div id="load">

  </div>
  </body>
  <script>
    /*
    * load()方法
    * 最简介的ajax方法
    * 常用于异步展示简单的信息
    * */
    $("#load").load("Do_getName")
    //加载事件
    $(function () {
      select()
    })
    /*
    * 模糊查询
    * */
    function ccc() {
      var bname= $("#uname").val()
      $('tr:gt(0)').remove();
      $.get("Do_like","bname="+bname,function (data) {
        for (let i = 0; i < data.length; i++) {
          var str="<tr>";
          str+="<td>"+data[i].bid+"</td>";
          str+="<td>"+data[i].bname+"</td>";
          str+="<td>"+data[i].bprice+"</td>";
          str+="<td>"+data[i].bcolor+"</td>";
          str+="<td>"+data[i].btime+"</td>";
          str+="<td><a href='javascript:void(0)' onclick='update("+data[i].bid+","+"\""+data[i].bname+"\","+data[i].bprice+","+"\""+data[i].bcolor+"\","+"\""+data[i].btime+"\")'>点我修改</a>&nbsp;<a href='javascript:void(0)' onclick='delete1("+data[i].bid+")'>点我删除</a></td>";
          str+="</tr>"
          $('table').append(str);
        }
      },"JSON") //类型一定要用引号引起来！

    }
    /*
    * 分页方法
    * */
    $(".but").click(function (){
      $('tr:gt(0)').remove();
      var index = $(this).val();
      $.getJSON("Do_page","index="+index,function (data) {
        for (let i = 0; i < data.length; i++) {
          var str="<tr>";
          str+="<td>"+data[i].bid+"</td>";
          str+="<td>"+data[i].bname+"</td>";
          str+="<td>"+data[i].bprice+"</td>";
          str+="<td>"+data[i].bcolor+"</td>";
          str+="<td>"+data[i].btime+"</td>";
          str+="<td><a href='javascript:void(0)' onclick='update("+data[i].bid+","+"\""+data[i].bname+"\","+data[i].bprice+","+"\""+data[i].bcolor+"\","+"\""+data[i].btime+"\")'>点我修改</a>&nbsp;<a href='javascript:void(0)' onclick='delete1("+data[i].bid+")'>点我删除</a></td>";
          str+="</tr>"
          $('table').append(str);
        }
      })
    })
    /*
    * 为了后面的增删改调用方便
    * */
    function select() {
      $('tr:gt(0)').remove();
      //路径  参数  回调函数 返回值类型
      //$.get $.post    $.getJSON $.load
      $.getJSON('Do_Select','',function (data) {
        for (let i = 0; i < data.length; i++) {
          var str="<tr>";
          str+="<td>"+data[i].bid+"</td>";
          str+="<td>"+data[i].bname+"</td>";
          str+="<td>"+data[i].bprice+"</td>";
          str+="<td>"+data[i].bcolor+"</td>";
          str+="<td>"+data[i].btime+"</td>";
          str+="<td><a href='javascript:void(0)' onclick='update("+data[i].bid+","+"\""+data[i].bname+"\","+data[i].bprice+","+"\""+data[i].bcolor+"\","+"\""+data[i].btime+"\")'>点我修改</a>&nbsp;<a href='javascript:void(0)' onclick='delete1("+data[i].bid+")'>点我删除</a></td>";
          str+="</tr>"
          $('table').append(str);
        }
      })
    }
    /*
    * 点修改进来以后 传值加设置id禁用
    * */
    function update(bid,bname,bprice,bcolor,btime) {
      // alert("点了修改"+bname)
      $('input[name="bid"]').val(bid);  //设置name为bid的值为ob
      $('input[name="bname"]').val(bname);
      $('input[name="bprice"]').val(bprice);
      $('input[name="bcolor"]').val(bcolor);
      $('input[name="btime"]').val(btime);
      $('input[name="bid"]').attr("readonly","readonly"); //并设置为禁用状态
    }
    /*
    * 修改跟新增共用一个按钮处理
    * */
    function insert_update() {
      var url="";
      if($('input[name="bid"]').attr("readonly")=="readonly"){
        url="Do_Update";
      }else{
        url="Do_insert";
      }
      var obj=$("form").find(":input"); //获取所有输入框
      var str=obj.serialize();  //获取里面的所有内容
      $.post(url,str,function (data) {
        alert(data);
        select();
        //清空表单
        $("form").find(":input").val("");
        $('input[name="bid"]').removeAttr("readonly");  //去掉禁用
      })
    }
    /*
    * 删除
    * */
    function delete1(bid) {
      $.get("Do_Delete","bid="+bid,function (data) {
        if(data.trim()=="true"){
          alert("删除成功！")
          select()
        }else{
          alert("删除失败！")
        }
      })
    }
  </script>
</html>

servlet代码：

代码量太多这里只展示分页servlet

package Servlet;

import Service.BananaService;
import Service.impl.BananaServiceimpl;
import com.alibaba.fastjson.JSON;
import entity.banana;

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

@WebServlet("/Do_page")
public class Do_page extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置resp编码格式为utf-8 两种方式都可以
        resp.setContentType("text/html;charset=utf-8");
        resp.setCharacterEncoding("utf-8");
        BananaService banana=new BananaServiceimpl();
        int index=1;
        int count = (int) Math.ceil(banana.count()/3.0);
        if(req.getSession().getAttribute("index")!=null){
            int page= Integer.parseInt(req.getParameter("index"));
            index= (int) req.getSession().getAttribute("index");
            if(page==-1||page==1){
                index=index+page;
            }else{
                index=Integer.parseInt(req.getParameter("index"));
            }
            if(index>count){
                index=count;
            }else if(index<1){
                index=1;
            }
        }
        //返回结果给AJAX  用out对象输出返回
        PrintWriter out = resp.getWriter();
        req.getSession().setAttribute("index",index);
        List<banana> list=banana.limit(index,3);
        //如果java结果要返回对象或者集合
        //一定要手动先转成JSON格式 再out.print返回
        String result = JSON.toJSONString(list);
        out.print(result);
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }
}

Dao层实现类代码：

package dao.impl;

import dao.Bananaimpl;
import dao.BasDao;
import entity.banana;

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

public class Bananadaoimpl extends BasDao implements Bananaimpl {
    @Override
    public List<banana> getall() {
        List<banana>list=new ArrayList<>();
        Connection conn=this.getConnection();
        String sql="select * from banana";
        try {
            PreparedStatement ps=conn.prepareStatement(sql);
            ResultSet rs=ps.executeQuery();
            while (rs.next()){
                banana b=new banana();
                b.setBid(rs.getInt("bid"));
                b.setBname(rs.getString("bname"));
                b.setBprice(rs.getDouble("bprice"));
                b.setBcolor(rs.getString("bcolor"));
                b.setBtime(rs.getString("btime"));
                list.add(b);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return list;
    }

    @Override
    public int delete(int bid) {
        int i=0;
        Connection conn=this.getConnection();
        String sql="delete from banana where bid=?";
        try {
            PreparedStatement ps=conn.prepareStatement(sql);
            ps.setInt(1,bid);
            i=ps.executeUpdate();
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return i;
    }

    @Override
    public int insert(banana b) {
        int i=0;
        Connection conn=this.getConnection();
        String sql="insert into banana(bid,bname,bprice,bcolor,btime) values(?,?,?,?,?)";
        try {
            PreparedStatement ps=conn.prepareStatement(sql);
            ps.setInt(1,b.getBid());
            ps.setString(2,b.getBname());
            ps.setDouble(3,b.getBprice());
            ps.setString(4,b.getBcolor());
            ps.setString(5,b.getBtime());
            i=ps.executeUpdate();
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return i;
    }

    @Override
    public int update(banana b) {
        int i=0;
        Connection conn=this.getConnection();
        String sql="update banana set bname=?,bprice=?,bcolor=?,btime=? where bid=?";
        try {
            PreparedStatement ps=conn.prepareStatement(sql);
            ps.setString(1,b.getBname());
            ps.setDouble(2,b.getBprice());
            ps.setString(3,b.getBcolor());
            ps.setString(4,b.getBtime());
            ps.setInt(5,b.getBid());
            i=ps.executeUpdate();
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return i;
    }

    @Override
    public List<banana> limit(int index,int i) {
        List<banana>list=new ArrayList<>();
        Connection conn=this.getConnection();
        String sql="select * from banana limit ?,?";
        try {
            PreparedStatement ps=conn.prepareStatement(sql);
            int c=(index-1)*i;
            ps.setInt(1,c);
            ps.setInt(2,i);
            ResultSet rs=ps.executeQuery();
            while (rs.next()){
                banana b=new banana();
                b.setBid(rs.getInt("bid"));
                b.setBname(rs.getString("bname"));
                b.setBprice(rs.getDouble("bprice"));
                b.setBcolor(rs.getString("bcolor"));
                b.setBtime(rs.getString("btime"));
                list.add(b);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return list;
    }

    @Override
    public int count() {
        int i=0;
        Connection conn=this.getConnection();
        String sql="select count(*) from banana";
        try {
            PreparedStatement ps=conn.prepareStatement(sql);
            ResultSet rs=ps.executeQuery();
            while (rs.next()){
                i=rs.getInt(1);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return i;
    }

    @Override
    public List<banana> like(String bname) {
        List<banana>list=new ArrayList<>();
        Connection conn=this.getConnection();
        String sql="select * from banana where bname like ?";
        try {
            PreparedStatement ps=conn.prepareStatement(sql);
            ps.setString(1,'%'+bname+'%');
            ResultSet rs=ps.executeQuery();
            while (rs.next()){
                banana b=new banana();
                b.setBid(rs.getInt("bid"));
                b.setBname(rs.getString("bname"));
                b.setBprice(rs.getDouble("bprice"));
                b.setBcolor(rs.getString("bcolor"));
                b.setBtime(rs.getString("btime"));
                list.add(b);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return list;
    }
}

service层代码：

package Service;

import entity.banana;

import java.util.List;

public interface BananaService {
    /*
     * 查询全部香蕉
     * */
    public List<banana> getall();
    /*
     * 删除香蕉
     * */
    public int delete(int bid);
    /*
     * 增加香蕉
     * */
    public int insert(banana b);
    /*
     * 修改香蕉
     * */
    public int update(banana b);
    /*
     * 分页查询全部
     * */
    public List<banana>limit(int index,int i);
    /*
     * 统计页数
     * */
    public int count();
    /*
     * 模糊查询
     * */
    public List<banana>like(String bname);
}

运行结果：

        1.首页界面

        

         2.分页后界面

         3.增加后

         4.模糊查询后

         5.修改界面

 

        6.删除界面 

 本项目全部采用Ajax异步方式完成

Abcdzzr
关注
  • 5
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
java ajax实现增删改查_MVC+jQuery.Ajax异步实现增删改查和分页
weixin_35940587的博客
03-02 342
这篇文章主要为大家详细介绍了MVC结合jQuery.Ajax异步实现增删改查和分页的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下本文实例为大家分享了MVC+jQuery.Ajax异步实现增删改查和分页的具体代码，供大家参考，具体内容如下1、Model层代码using System;using System.Data;using System.Configu...
AJAX实现增删改查
zhanglijie__1的博客
10-08 860
实例介绍 1.做一个网页，可以进行数据的增删改查的为佳 2.用pycharm工具建flask框架 3.按照MVC标准进行ajax前后端分离的代码 4.运行实现 代码分析 因为是MVC模式，所以有个dao包，有个controller包，有个service包，然后因为有些类需要重复使用，所以有个封装类的文件，在entity包里，pycharm中Flask框架生成的app文件，动态前端页面存在tem...
AJAX做增删改查详细！
weixin_30530939的博客
04-27 431
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <...
Ajax使用教程，及增删改查
xiaojxs的博客
06-02 639
什么是Ajax Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 由上面的定义可以看出，Ajax的主要目的是为了，在不需要重新加载整个网页的前提下，使网页的一部分更新。同时，为了实现部分更新，就需要前端和后台之间的数据交换，包括前端向后台提交数据和前端从后
ajax实现增删查改
qq_57104988的博客
08-29 1995
【代码】ajax实现增删查改。
完整thinkPHP增删改查+分页+模糊查询+Ajax登录+注册
03-08
这个“完整thinkPHP增删改查+分页+模糊查询+Ajax登录+注册”项目涵盖了几个核心的Web开发知识点，下面将逐一详细解释。 1. **增删改查（CRUD）**：CRUD代表创建（Create）、读取（Read）、更新（Update）和删除...
基于SSM框架的增删改查Ajax分页模糊查询（有Mysql数据库）
06-26
这个项目以"基于SSM框架的增删改查Ajax分页模糊查询（有Mysql数据库）"为主题，主要涵盖了以下几个关键知识点： 1. **Spring框架**：Spring是一个全面的企业级应用开发框架，它提供了依赖注入（Dependency ...
SSM项目增删改查以及模糊查询与分页
11-28
在本项目中，它存储了SSM应用的所有数据，与MyBatis配合执行SQL语句，完成数据的增删改查。 这些技术的结合，使得SSM项目能够构建出一个高效、可维护的Web应用，提供灵活的数据查询和展示方式，同时保证了良好的...
基于ssm的登陆注册批量增删该查分页模糊查询
04-19
7. **增删改查（CRUD）**：这是任何数据库应用的基础，包括创建（Create）、读取（Read）、更新（Update）和删除（Delete）操作。开发者可能通过SSM框架提供的注解和Mapper接口实现了这些功能。 项目中涉及的文件名...
SSM前后台分离技术增删改查项目
11-04
SSM前后台分离技术增删改查项目是一个典型的Java Web应用程序示例，它结合了Spring、SpringMVC和MyBatis三个核心框架，用于构建高效、灵活的企业级应用。在这个项目中，开发者不仅实现了基本的数据操作功能，如增、...
Ajax实现增删改查的demo
04-01
Ajax实现增删改查的demo
随记（ajax效果的增删改查）
10-16
新人一枚，网上搜了很多关于ajax增删改查的例子，都不是自己要的效果，自己写的，虽然花了点时间，并且很基础，但是增删改查还是全的。希望可以帮到您哦。这个是我自己没有休整过的，注释较白话，大神什么的勿喷。
ajax分页增删改查
08-20
javaweb用ajax（用getJson传数据的）+servlet对mysql数据库进行分页的增删改查，有sql文件及所需jar包，样式比较简单但功能都没问题
AJAX实现数据的增删改查操作详解【java后台】
10-15
主要介绍了AJAX实现数据的增删改查操作,结合实例形式详细分析了ajax结合java后台实现数据库增删改查相关操作技巧,需要的朋友可以参考下
Servlet+ajax+CURD实现增删改查功能程序
10-06
Servlet+ajax实现的增删改查功能程序，下载用Eclipse导入，即可运行。
ajax 多条件模糊查询分页
365的足迹
08-18 1433
本地代码经过实践产生，欢迎各位来参考使用。 代码仅限参考，要有一定的jQuery基础 要学会编程思想。
ajax异步增删改,ajax无刷新增删改查有关问题
weixin_35315373的博客
08-05 184
ajax无刷新增删改查问题本帖最后由 ab221 于 2014-09-18 21:55:55 编辑我是用struts2的，删除我想根据ID删除，但是，删除之后，不知道要怎样更新列表数据数据？？？？感觉这方法很难实现的样子，大神，有没有其他方法啊？？？哪位大神用过struts2+jq+ajax写过增删改查的，麻烦给个源码和例子，，谢谢！！代码如下：oBtn.onclick=function(){...
ajax练习--完成增删改查
最新发布
qq_59430243的博客
02-17 579
ajax的增删改查
5 AJAX（实际项目的增删改查）
lzyPM的博客
06-16 285
页面载入时 点击页码时 新增页面内容时 （删除/修改）页面内容时 页面载入时 页面载入时 操作 AJAX参数 SUCCESS返回值 查询页码内容 设置函数调用AJAX，页面载入时调用函数 API固定 查询页面内容 设置函数调用AJAX，页面载入时调用函数 hash/cookie页码+API 查询页码SUCCESS 1.清空页码内容（后置：点击页码时方便调用） 2.AJAX传入参数为固定 3.API返回JSON格式数据，内容为N个页码 4.将JSON格式转化为对象 5.利用D.
vue3 +Vite +ajax+springboot 增删改查
05-10
好的，这是一个典型的前后端分离的例子，我可以给您提供一个简单的示例代码，来帮助您理解如何使用 Vue3 + Vite + Ajax + SpringBoot 实现增删改查功能。 前端使用 Vue3 + Vite + Ajax 实现： 1. 在 Vue3 中，使用 `axios` 或者 `fetch` 进行 AJAX 请求，请求后端 SpringBoot 服务器，获取数据或者提交数据。 2. 在 Vue3 中，使用 `vue-router` 进行 SPA 单页应用的路由控制，实现前端页面的跳转。 3. 在 Vue3 中，使用 `vuex` 进行状态管理，方便组件之间的数据共享和传递。 下面是一个简单的 Vue3 组件的示例代码： ```vue <template> <div> <h1>用户列表</h1> <table> <thead> <tr> <th>ID</th> <th>用户名</th> <th>邮箱</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="user in users" :key="user.id"> <td>{{ user.id }}</td> <td>{{ user.username }}</td> <td>{{ user.email }}</td> <td> <button @click="editUser(user)">编辑</button> <button @click="deleteUser(user.id)">删除</button> </td> </tr> </tbody> </table> </div> </template> <script> import axios from 'axios'; export default { name: 'UserList', data() { return { users: [], }; }, methods: { async getUsers() { const response = await axios.get('/api/users'); this.users = response.data; }, async deleteUser(id) { await axios.delete(`/api/users/${id}`); this.getUsers(); }, editUser(user) { // 跳转到编辑用户页面，使用 vue-router this.$router.push(`/users/${user.id}`); }, }, mounted() { this.getUsers(); }, }; </script> ``` 后端使用 SpringBoot 实现： 1. 在 SpringBoot 中，使用 `@RestController` 和 `@RequestMapping` 注解定义 RESTful API 接口，实现增删改查的逻辑。 2. 在 SpringBoot 中，使用 `@Service` 和 `@Repository` 注解定义服务层和数据访问层，实现业务逻辑和数据库操作。 3. 在 SpringBoot 中，使用 `Spring Data JPA` 或者 `MyBatis` 等框架进行数据库操作，简化代码编写。 下面是一个简单的 SpringBoot Controller 的示例代码： ```java @RestController @RequestMapping("/api/users") public class UserController { private final UserService userService; public UserController(UserService userService) { this.userService = userService; } @GetMapping public List<User> listUsers() { return userService.listUsers(); } @PostMapping public void createUser(@RequestBody User user) { userService.createUser(user); } @PutMapping("/{id}") public void updateUser(@PathVariable Long id, @RequestBody User user) { userService.updateUser(id, user); } @DeleteMapping("/{id}") public void deleteUser(@PathVariable Long id) { userService.deleteUser(id); } } ``` 这是一个简单的增删改查的示例代码，您可以根据自己的需要进行修改和扩展。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Abcdzzr

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

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

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

打赏作者

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

抵扣说明：

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

余额充值