利用jQuery,json,以及三层架构技术实现对两表数据库进行增删改查

最新推荐文章于 2021-08-05 14:13:55 发布
最新推荐文章于 2021-08-05 14:13:55 发布
阅读量248 收藏 1
点赞数
文章标签： mysql sql 数据库 json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jia_yadong/article/details/107117948
版权

一.添加
1.跳转添加页面
2.获取主表数据并追加到下拉框中
3.完善表单数据成功添加并跳转到列表页面
二.删除
1.通过id实现单个删除和批量删除
2.利用delete from staff where yid in ( );语句实现单个删除与批量删除共用删除方法,减少代码冗余
三.改
1.跳转修改页面
2.获取主表数据并追加到下拉框中
3.通过id获取要修改的数据并回显的表单中
4.通过id修改数据
四.查
1.查询所有信息
案例
主表
在这里插入图片描述
从表
在这里插入图片描述
列表jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.8.3.js"></script>
<script type="text/javascript">
	$(function() {
		//全选
		$("#qx").click(function() {
			$(":checkbox:not(:first)").attr("checked", true);
		})
		//全不选
		$("#qbx").click(function() {
			$(":checkbox:not(:first)").attr("checked", false);
		})
		//反选
		$("#fx").click(function() {
			$(":checkbox:not(:first)").each(function() {
				$(this).attr("checked",!$(this).attr("checked"))
			})
		})
		//全选或全不选
		$("#chs").click(function() {
			if($(this).attr("checked")){
				$(":checkbox").attr("checked", true);
			}else{
				$(":checkbox").attr("checked", false);
			}
		})
		//添加数据
		$("#add").click(function() {
			location="add.jsp";
		})
		//批量删除
		$("#dels").click(function() {
			var a="";
			$(":checkbox:not(:first):checked").each(function() {
				a+=","+$(this).val();
			})
			var yid=a.substring(1);
			$.post("staff?action=del", {yid:yid}, function(i) {
				if(i>0){
					alert("删除成功");
					location="getall.jsp";
				}
			}, "text")
		})
	})
	//修改
	function xg(yid) {
		location="show.jsp?yid="+yid;
	}
	//单个删除
	function del(yid) {
		$.post("staff?action=del", {yid:yid}, function(i) {
			if(i>0){
				alert("删除成功");
				location="getall.jsp";
			}
		}, "text")
	}
</script>
</head>
<body>
	<table border="1" cellspacing="0">
	  <tr>
	  	<td><input type="checkbox" id="chs"></td>
	    <th>编号</th>
	    <th>姓名</th>
	    <th>性别</th>
	    <th>生日</th>
	    <th>爱好</th>
	    <th>部门</th>
	    <th>操作1</th>
	    <th>操作2</th>
	  </tr>
	  <c:if test="${list==null }">
	  	<c:redirect url="staff?action=getall"></c:redirect>
	  </c:if>
	  <c:forEach items="${list }" var="lis" varStatus="a">
	  <tr>
	  	<td><input type="checkbox" value="${lis.yid}"></td>
	    <td>${a.count }</td>
	    <td>${lis.yname }</td>
	    <td>${lis.sex }</td>
	    <td>${lis.birth }</td>
	    <td>${lis.hobby }</td>
	    <td>${lis.bname }</td>
	    <td><input type="button" value="修改" onclick="xg(${lis.yid})"> </td>
		<td><input type="button" value="删除" onclick="del(${lis.yid})"></td>	  
	  </tr>
	  </c:forEach>
	  <tr>
	  	<td align="center" colspan="10">	  
		  	<input type="button"  value="全选" id="qx">
		  	<input type="button"  value="全不选" id="qbx">
		  	<input type="button"  value="反选" id="fx">
		  	<input type="button"  value="添加" id="add">
		  	<input type="button"  value="批量删除" id="dels">
	  	</td>
	  </tr>
	</table>	
</body>
</html>

添加jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.8.3.js"></script>
<script type="text/javascript">
	$(function() {
		//获取下拉框的值并追加到下拉框
		$.post("staff?action=option", function(obj) {
			for ( var i in obj) {
				$("[name='bname']").append("<option value='"+obj[i].bmid+"'>"+obj[i].bname+"</option>")
			}
		}, "json")
		//从form表单获取数据并添加
		$("#add").click(function() {
			$.post("staff?action=add", $("form").serialize(), function(i) {
				if(i>0){
					alert("添加成功");
					location="getall.jsp";
				}
			}, "text")
		})
	})
</script>
</head>
<body>
	<form>
		<input type="hidden" name="yid">
	姓名:	<input type="text" name="yname"><br>
	性别:
		<input type="radio" value="男" name="sex">男
		<input type="radio" value="女" name="sex">女<br>
	生日:	<input type="text" name="birth"><br>
	爱好:
		<input type="checkbox" value="旅游" name="hobby" >旅游
		<input type="checkbox" value="读书" name="hobby" >读书
		<input type="checkbox" value="音乐" name="hobby" >音乐
		<input type="checkbox" value="运动" name="hobby" >运动
		<input type="checkbox" value="美食" name="hobby" >美食<br>
	部门:
		<select name="bname">
			
		</select><br>	
		<input type="button" value="添加" id="add">
	</form>
</body>
</html>

修改jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.8.3.js"></script>
<script type="text/javascript">
	$(function() {
		var yid=${param.yid}
		alert(yid);
		$.post("staff?action=show", {yid:yid}, function(obj) {
			var staff=obj.staff;
			var lis=obj.list;
			//获取下拉框
			for ( var i in lis) {
				$("[name='bname']").append("<option value='"+lis[i].bmid+"'>"+lis[i].bname+"</option>")
			}
			///回显
			$("[name='yid']").val(staff.yid);
			$("[name='yname']").val(staff.yname);
			$("[name='sex'][value='"+staff.sex+"']").attr("checked", true);
			$("[name='birth']").val(staff.birth);
			//爱好
			var hobbys=staff.hobby.split(",");
			for ( var i in hobbys) {
				$("[name='hobby'][value='"+hobbys[i]+"']").attr("checked", true);
			}
			//部门
			$("[name='bname']").val(staff.bmid);
		}, "json")
		/提交修改内容
		$("#change").click(function() {
			$.post("staff?action=change", $("form").serialize(), function(i) {
				if(i>0){
					alert("修改成功");
					location="getall.jsp"
				}
			}, "text")
		})
		
	})
</script>
</head>
<body>
	<form>
		<input type="hidden" name="yid">
	姓名:	<input type="text" name="yname"><br>
	性别:
		<input type="radio" value="男" name="sex">男
		<input type="radio" value="女" name="sex">女<br>
	生日:	<input type="text" name="birth"><br>
	爱好:
		<input type="checkbox" value="旅游" name="hobby" >旅游
		<input type="checkbox" value="读书" name="hobby" >读书
		<input type="checkbox" value="音乐" name="hobby" >音乐
		<input type="checkbox" value="运动" name="hobby" >运动
		<input type="checkbox" value="美食" name="hobby" >美食<br>
	部门:
		<select name="bname">
			
		</select><br>	
		<input type="button" value="修改" id="change">
	</form>
</body>
</html>

表示层servlet

package control;

import java.io.IOException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

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 bean.Bumen;
import bean.Staff;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import servicedao.ServiceDao;
import serviceimpl.ServiceImpl;
@WebServlet("/staff")
public class StaffServlet extends HttpServlet{
	ServiceDao sdao=new ServiceImpl();
	@Override
	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		String action=request.getParameter("action");
		System.out.println(action);
		if(action.equals("getall")) {
			getall(request,response);
		}
		if(action.equals("show")) {
			show(request,response);
		}
		if(action.equals("change")) {
			change(request,response);
		}
		if(action.equals("del")) {
			del(request,response);
		}
		if(action.equals("add")) {
			add(request,response);
		}
		if(action.equals("option")) {
			option(request,response);
		}
	}
	private void add(HttpServletRequest request, HttpServletResponse response) {
		String yname=request.getParameter("yname");
		String sex=request.getParameter("sex");
		String birth=request.getParameter("birth");
		String bmid=request.getParameter("bname");
		String hobbys[]=request.getParameterValues("hobby");
		String hobby="";
		for (String string : hobbys) {
			hobby+=","+string;
		}
		Staff staff=new Staff();
		staff.setYname(yname);
		staff.setSex(sex);
		staff.setBirth(birth);
		staff.setBmid(Integer.parseInt(bmid));
		staff.setHobby(hobby);
		int i=sdao.add(staff);
		try {
			response.getWriter().print(i);
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
	}
	//获取下拉框
	private void option(HttpServletRequest request, HttpServletResponse response) {
		// TODO Auto-generated method stub
		List<Bumen> list=sdao.option();
		JSONArray json=JSONArray.fromObject(list);
		try {
			response.getWriter().print(json);
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
	//删除
	private void del(HttpServletRequest request, HttpServletResponse response) {
		String yid=request.getParameter("yid");
		int i=sdao.del(yid);
		try {
			response.getWriter().print(i);
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
	//修改
	private void change(HttpServletRequest request, HttpServletResponse response) {
		String yname=request.getParameter("yname");
		String yid=request.getParameter("yid");
		String sex=request.getParameter("sex");
		String birth=request.getParameter("birth");
		String bmid=request.getParameter("bname");
		String hobbys[]=request.getParameterValues("hobby");
		String hobby="";
		for (String string : hobbys) {
			hobby+=","+string;
		}
		Staff staff=new Staff(Integer.parseInt(yid), yname, sex, birth, hobby.substring(1),Integer.parseInt(bmid), null);
		int i=sdao.change(staff);
		try {
			response.getWriter().print(i);
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
	//回显
	private void show(HttpServletRequest request, HttpServletResponse response) {
		String yid=request.getParameter("yid");
		Staff staff=sdao.show(yid);
		List<Bumen> list=sdao.option();
		System.out.println(list);
		//将获取到的下拉框list集合,和需要回显的数据对象放入到map集合中
		Map<String, Object> map=new HashMap<String, Object>();
		map.put("staff",staff);
		map.put("list", list);
		//将map集合通过json技术转换成json对象
		JSONObject json=JSONObject.fromObject(map);
		try {
		//将json对象传到jsp页面中的回调函数中
			response.getWriter().print(json);
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
	//获取列表信息
	private void getall(HttpServletRequest request, HttpServletResponse response) {
		List<Staff> list=sdao.getall();
		if(!list.isEmpty()) {
			request.setAttribute("list", list);
			try {
				request.getRequestDispatcher("getall.jsp").forward(request, response);
			} catch (ServletException | IOException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
		
	}
}

数据访问层

package impl;

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

import bean.Bumen;
import bean.Staff;
import dao.StaffDao;
import util.Getconn;

public class StaffImpl implements StaffDao{
	//获取列表所有信息
	@Override
	public List<Staff> getall() {
		List<Staff> list =new ArrayList<Staff>();
		Connection conn=Getconn.getconn();
		String sql="select a.*,b.bname from staff a , bumen b where a.bmid=b.bmid";
		try {
			PreparedStatement pre=conn.prepareStatement(sql);
			ResultSet re=pre.executeQuery();
			while(re.next()) {
				Staff staff=new Staff(re.getInt(1),re.getString(2),re.getString(3),re.getString(4),re.getString(5),re.getInt(6),re.getString(7));
				list.add(staff);
			}
			Getconn.closes(conn, pre, re);
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return list;
	}
	//回显要修改数据的值
	@Override
	public Staff show(String yid) {
		Staff staff=null;
		Connection conn=Getconn.getconn();
		String sql="select * from staff where yid=?";
		try {
			PreparedStatement pre=conn.prepareStatement(sql);
			pre.setString(1, yid);
			ResultSet re=pre.executeQuery();
			if(re.next()) {
				staff=new Staff(re.getInt(1),re.getString(2),re.getString(3),re.getString(4),re.getString(5),re.getInt(6),null);
			}
			Getconn.closes(conn, pre, re);
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return staff;
	}
	//查询部门表,获取下拉框值
	@Override
	public List<Bumen> option() {
		List<Bumen> list =new ArrayList<Bumen>();
		Connection conn=Getconn.getconn();
		String sql="select  * from bumen";
		try {
			PreparedStatement pre=conn.prepareStatement(sql);
			ResultSet re=pre.executeQuery();
			while(re.next()) {
				Bumen bumen=new Bumen(re.getInt(1),re.getString(2));
				list.add(bumen);
			}
			Getconn.closes(conn, pre, re);
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return list;
	}
	//修改
	@Override
	public int change(Staff staff) {
		int i=0;
		Connection conn=Getconn.getconn();
		String sql="update  staff set yname=?,sex=?,birth=?,hobby=?,bmid=? where yid=?";
		try {
			PreparedStatement pre=conn.prepareStatement(sql);
			pre.setString(1, staff.getYname());
			pre.setString(2, staff.getSex());
			pre.setString(3, staff.getBirth());
			pre.setString(4, staff.getHobby());
			pre.setInt(5, staff.getBmid());
			pre.setInt(6, staff.getYid());
			i=pre.executeUpdate();
			Getconn.closes(conn, pre);
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
		return i;
	}
	//删除
	@Override
	public int del(String yid) {
		int i=0;
		Connection conn=Getconn.getconn();
		String sql="delete from staff where yid in ("+yid+")";
		try {
			PreparedStatement pre=conn.prepareStatement(sql);
			i=pre.executeUpdate();
			Getconn.closes(conn, pre);
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}	
		return i;
	}
	@Override
	public int add(Staff staff) {
		int i=0;
		Connection conn=Getconn.getconn();
		String sql="insert into staff value(null,?,?,?,?,?)";
		try {
			PreparedStatement pre=conn.prepareStatement(sql);
			pre.setString(1, staff.getYname());
			pre.setString(2, staff.getSex());
			pre.setString(3, staff.getBirth());
			pre.setString(4, staff.getHobby());
			pre.setInt(5, staff.getBmid());
			i=pre.executeUpdate();
			Getconn.closes(conn, pre);
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}		
		return i;
	}

}

以上是两表连查的核心代码部分
小白技术,大佬勿喷

小白加菜鸡
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用三大框架实现增删改查
10-22
使用三大框架实现基本的实现增删该查，数据库自建
利用jQuery,json,以及三层架构技术实现对单表数据库进行增删改查
jia_yadong的博客
06-30 512
利用jQuery,json,以及三层架构技术实现对单表数据库进行增删改查 三层建构: 1.表示层 2.业务逻辑层 3.数据访问层 具体操作如下: 表格数据 登录jsp页面 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:
使用mysql,php,ajax,jquery,JSON实现数据库的增删改查
LPLIFE的博客
05-18 3288
主要知识点:1.Ajax实现局部刷新2.jquery操作DOM3.使用php的mysqli实现对数据库的增删改查4.从数据库返回JSON格式的数据,并进行解析渲染过程遇到的问题: 编码设置,数据类型转换等总的来说麻雀虽小五脏俱全.数据库中:实现的功能如下图:...
我做一个教育微信小程序 求帮助
a71277892的博客
09-12 295
怎么在小程序里面把教师和学生互相绑定,教师精确给学生上传照片，学生也能传给固定的学生
2017精华版：jquery 中 ajax，后台获取数据库json数据，显示在html页面 02
u013758456的专栏
06-09 6377
2.页面 显示 ajax返回 的json数据 页面代码： mian.html rel="stylesheet" type="text/css" href="css/bg.css"/> type="text/javascript" src="main.js"> class="maincontent row "> class="breadcrumb"> 首页
SSH三大框架整合+ajax应用+jquery+json应用+分页+增删改查
04-11
通过这个项目，开发者可以学习如何配置SSH框架，编写Action类，设置Action Mapping，使用Hibernate进行数据操作，以及如何在页面上利用Ajax和jQuery展示和处理JSON数据，同时实现分页和基本的CRUD功能。
easyui+三层+json增删改查DEMO
01-17
综上所述，"easyui+三层+json增删改查DEMO"是一个全面展示Web应用开发技术的实例，通过使用EasyUI实现前端交互，结合三层架构处理业务逻辑，利用JSON进行数据传输，以及利用数据库的分页存储过程优化数据检索。...
在构建一个Java web项目中。比如我以学生表为例子.对学生表的数据进行增删改查如何进行呀。 在此之前要构建项目运行的环境：采
06-01
对学生表的数据进行增删改查如何进行呀。 在此之前要构建项目运行的环境：采用的软件idea+架包+tomcat+三个架包的配置文件。 任何项目Javaweb 项目的构建 离不开三要素 第一要素: 前端展示页面 采用的技术...
Jfinal增删改查+（boostrap前端）
01-16
本项目是一个使用Jfinal实现的增删改查（CRUD）操作实例，结合了前端Bootstrap框架，提供了简洁且实用的用户界面，非常适合初学者学习和实践。 首先，我们来看Jfinal的核心特性。Jfinal 采用了Model-View-...
easyui+三层的完整CRM附加数据可以学习学习
05-17
- **数据访问层（Data Access Layer）**：处理所有数据库操作，如增删改查，封装成通用的 DAL 类，供 BLL 层调用。 3. **CRUD 操作**：创建（Create）、读取（Read）、更新（Update）和删除（Delete）是任何数据...
用jQuery中的ajax返回的json数据组合查询和组合查询的分页源码
suxiaxuhuanhuan的专栏
03-08 3031
1.       思路 在写分页的时候必定要考虑到在组合查询的时候也要分页。组合查询就是把你想要查询的条件获取并传到servelt中去处理，拼接成sql语句。 2．首先获取模糊查询的条件          所使用的html代码为：                                  姓名："text" name="name" id="name"/>
jquery对JSON的操作
qq_29207823的博客
08-30 4044
json字符串转json对象：jQuery.parseJSON(jsonStr); json对象转json字符串：JSON.stringify(jsonObj)
php ci框架修改,CI3.0框架中简单增删改查
weixin_32753181的博客
03-16 415
第一步：模型层里有个控制器User_model.php里面内容为:defined('BASEPATH') OR exit('No direct script access allowed');class User_Model extends CI_Model{protected $table_name = "user";//调用类库public function __construct(){par...
三层架构中ajax,基于mvc三层架构和ajax技术实现最简单的文件上传
weixin_39925350的博客
08-05 308
前台页面提交文件文件操作上传文件//上传文件function upFile() {var file = document.getElementById("UpFile").files[0];if (!file) {alert("请选择文件!");return;}var size = file.size / 1024 / 1024;if (size > 50) {alert("图片文件不能大于...
CI3框架 查询 模型实例化
萨萨的博客
09-05 1366
CI模型实例化 $this->load->model('M_sku_channel_stock');//框架原本model文件下的 调用模型方法： $total = $this->M_sku_channel_stock->query_count();//模型方法 ci3没有命名空间如果需要继承那么 除了框架自动加载model下面的类之外的需要自己文件中引...
codeigniter mysql_CI框架(CodeIgniter)实现的数据库增删改查操作总结
weixin_33443972的博客
01-18 315
本文实例讲述了CI框架(CodeIgniter)实现的数据库增删改查操作。分享给大家供大家参考，具体如下：controllers下的 cquery.php文件class CQuery extends Controller {//构造函数function CQuery() {parent::Controller();// $this->load->database();}functi...
三层架构之基础篇（对数据库增删改查）
weixin_33711647的博客
12-16 2709
在上一篇中已经搭建好了一个三层架构的框架，现在使用三层架构来对数据库进行增删改查操作： 假设在数据库ItcastCater有一张表ManagerInfo，有如下几个字段 我们知道在UI,BLL,DAL之间有数据的交互，所以我们传递的数据需要有一个类型，因为我们操作的是ManagerInfo表，所以咱们可以在Model这里建一个类名为ManagerInfo的类，在这里定义的属性需要和M...
帮我写一个jquery实现的对数据库表格增删改查的前端代码
最新发布
04-21
好的，我会为你提供这方面的帮助。 首先，在页面中引入jQuery库： ``` <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ``` 然后，需要将表格渲染到页面上： ``` <table id="table-data"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Age</th> <th>Gender</th> <th>操作</th> </tr> </thead> <tbody> </tbody> </table> ``` 接着，使用Ajax从后端获取数据： ``` $(document).ready(function() { loadData(); }); function loadData() { $.ajax({ url: 'your-url-to-retrieve-table-data', type: 'get', dataType: 'json', success: function(data) { // 渲染表格数据 renderTable(data); }, error: function() { alert('获取数据失败'); } }); } ``` 然后，实现添加数据的功能： ``` function addData() { var name = $('#name').val(); var age = $('#age').val(); var gender = $('#gender').val(); $.ajax({ url: 'your-url-to-add-data', type: 'post', dataType: 'json', data: { name: name, age: age, gender: gender }, success: function(data) { alert('添加成功'); // 清空输入框 $('#name').val(''); $('#age').val(''); $('#gender').val(''); // 重新加载数据 loadData(); }, error: function() { alert('添加失败'); } }); } ``` 接着，实现修改数据的功能： ``` function editData(id) { var name = $('#name').val(); var age = $('#age').val(); var gender = $('#gender').val(); $.ajax({ url: 'your-url-to-update-data', type: 'put', dataType: 'json', data: { id: id, name: name, age: age, gender: gender }, success: function(data) { alert('修改成功'); // 清空输入框 $('#name').val(''); $('#age').val(''); $('#gender').val(''); // 重新加载数据 loadData(); }, error: function() { alert('修改失败'); } }); } ``` 最后，实现删除数据的功能： ``` function deleteData(id) { $.ajax({ url: 'your-url-to-delete-data' + id, type: 'delete', dataType: 'json', success: function(data) { alert('删除成功'); // 重新加载数据 loadData(); }, error: function() { alert('删除失败'); } }); } ``` 以上就是一个简单的实现数据库表格增删改查的前端代码。需要注意的是，这里只提供了前端代码的框架，具体的后端实现需要根据业务需求来进行编写。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值