基于springmvc、ajax，后台连接数据库的增删改查
2024-05-04 04:43:01
前言
前段时间在博客园上找了一个springmvc的例子，照着学了一下，算是对springmvc有了一个初步的了解，打一个基础，下面是链接。（我只看了博客，视频太耗时间了）
博客链接：http://www.cnblogs.com/bigdataZJ/p/springmvc1.html
视频链接：http://ke.atguigu.com/course/48
老师前几天让我练习一下用ajax做增删改查，只给了我一张数据库的表，什么都不多说。过程肯定是十分痛苦，因为技术方面只是略知一二，真正做的时候真的是无从下手，老师又什么都不告诉你，顾着自己的事，网上各种百度，找学长帮忙，但是毕竟学长也很忙，所以说学习真的还是要看自己。不过，花了整整四天的时间，终于还是做出来了，功夫不负有心人。虽然做的真的是相当的low，代码方面也还有很多不足的地方。
最终效果展示页面：
准备工作
打开myecipse2014，打开数据库服务，打开navicat，将表导入数据库......等等，我就不多说了。
配置
新建maven项目工程
WEB-INF目录下的web.xml
1 <?xml version="1.0" encoding="UTF-8"?> 2 <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 3 xmlns="http://java.sun.com/xml/ns/javaee" 4 xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" 5 id="WebApp_ID" version="2.5"> 6 7 <!-- 配置DispatchcerServlet --> 8 <servlet> 9 <servlet-name>springDispatcherServlet</servlet-name> 10 <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> 11 <!-- 配置Spring mvc下的配置文件的位置和名称 --> 12 <init-param> 13 <param-name>contextConfigLocation</param-name> 14 <param-value>classpath:springmvc.xml</param-value> 15 </init-param> 16 <load-on-startup>1</load-on-startup> 17 </servlet> 18 19 <servlet-mapping> 20 <servlet-name>springDispatcherServlet</servlet-name> 21 <url-pattern>/</url-pattern> 22 </servlet-mapping> 23 24 <servlet-mapping> 25 <servlet-name>default</servlet-name> 26 <url-pattern>*.css</url-pattern> 27 </servlet-mapping> 28 29 <servlet-mapping> 30 <servlet-name>default</servlet-name> 31 <url-pattern>*.gif</url-pattern> 32 </servlet-mapping> 33 34 <servlet-mapping> 35 <servlet-name>default</servlet-name> 36 <url-pattern>*.jpg</url-pattern> 37 </servlet-mapping> 38 39 <servlet-mapping> 40 <servlet-name>default</servlet-name> 41 <url-pattern>*.js</url-pattern> 42 </servlet-mapping> 43 44 <servlet-mapping> 45 <servlet-name>default</servlet-name> 46 <url-pattern>*.html</url-pattern> 47 </servlet-mapping> 48 49 <filter> 50 <filter-name>SpringEncodingFilter</filter-name> 51 <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class> 52 <init-param> 53 <param-name>encoding</param-name> 54 <param-value>UTF-8</param-value> 55 </init-param> 56 <init-param> 57 <param-name>forceEncoding</param-name> 58 <param-value>true</param-value> 59 </init-param> 60 </filter> 61 <filter-mapping> 62 <filter-name>SpringEncodingFilter</filter-name> 63 <url-pattern>/*</url-pattern> 64 </filter-mapping> 65 66 </web-app>
web.xml
src目录下的springmvc.xml
1 <?xml version="1.0" encoding="UTF-8"?> 2 <beans xmlns="http://www.springframework.org/schema/beans" 3 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 4 xmlns:context="http://www.springframework.org/schema/context" 5 xmlns:mvc="http://www.springframework.org/schema/mvc" 6 xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd 7 http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.0.xsd 8 http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd"> 9 10 <mvc:default-servlet-handler/> 11 <mvc:annotation-driven></mvc:annotation-driven> 12 13 <!-- 配置自动扫描的包 --> 14 <context:component-scan base-package="com.jackie.springmvc.*"></context:component-scan> 15 16 <!-- 配置视图解析器 如何把handler 方法返回值解析为实际的物理视图 --> 17 <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"> 18 <property name = "prefix" value="/WEB-INF/"></property> 19 <property name = "suffix" value = ".jsp"></property> 20 </bean> 21 22 <bean id="messageSource" class="org.springframework.context.support.ResourceBundleMessageSource"> 23 <property name="basename" value="i18n"></property> 24 </bean> 25 26 <!-- 配置SessionLocaleResolver --> 27 <bean id="localeResolver" class="org.springframework.web.servlet.i18n.SessionLocaleResolver"></bean> 28 29 <!-- 配置LocaleChangeInterceptor --> 30 <mvc:interceptors> 31 <bean class="org.springframework.web.servlet.i18n.LocaleChangeInterceptor"></bean> 32 </mvc:interceptors> 33 34 <!-- <mvc:view-controller path="/i18n" view-name="i18n"/> --> 35 <mvc:view-controller path="/i18n2" view-name="i18n2"/> 36 37 </beans>
springmvc.xml
WEB-INF目录下的lib jar包
没弄明白博客园能不能传文件，我把我的jar包截图发上来，不保证所有jar包都是需要的。（我直接复制的老师某个项目的lib文件夹）
java代码
1 package com.jackie.springmvc.ajax.controller;
2
3 import java.util.HashMap;
4 import java.util.Map;
5
6 import org.springframework.beans.factory.annotation.Autowired;
7 import org.springframework.stereotype.Controller;
8 import org.springframework.web.bind.annotation.RequestMapping;
9 import org.springframework.web.bind.annotation.ResponseBody;
10
11 import com.alibaba.fastjson.JSONArray;
12 import com.jackie.springmvc.ajax.dao.OlderDao;
13
14 @Controller
15 public class OlderController {
16
17 @Autowired
18 private OlderDao olderDao;
19
20 //@CrossOrigin(origins="http://192.168.43.158:8080/TestSpringMVC/older", maxAge=3600)
21 @ResponseBody
22 @RequestMapping("/olders")
23 public Map<String, Object> olders(){
24 JSONArray dataJson = olderDao.getData("select * from peoplespecialcare");
25 Map<String, Object> map =new HashMap<String, Object>();
26 map.put("rows",dataJson);
27 map.put("total", olderDao.count);
28
29 return map;
30 }
31
32 @RequestMapping(value="/older/delete")
33 public String delete(Integer id) {
34 olderDao.getData("delete from peoplespecialcare where id = " + id);
35
36 return "redirect:/ajaxOperation.jsp";
37 }
38
39 @ResponseBody
40 @RequestMapping("/older/search")
41 public Map<String, Object> search(String peoplename){
42 JSONArray dataJson = olderDao.getData("select * from peoplespecialcare where peoplename=" + "'" + peoplename + "'");
43 Map<String, Object> map =new HashMap<String, Object>();
44 map.put("rows",dataJson);
45 map.put("total", olderDao.count);
46
47 return map;
48 }
49
50 @RequestMapping(value="/older/add")
51 public String add(Integer id, Integer peopleid, String peoplename, Integer servicestatusid,
52 Integer feespecialid, Double chargefee, Integer periodicalid,
53 Double startdate, Double enddate, Integer isfeeflagid, String remark) {
54 String sqlStr = "insert into peoplespecialcare(id, peopleid, peoplename, servicestatusid, feespecialid, chargefee, periodicalid, startdate, enddate, isfeeflagid, remark)values("+id+", "+peopleid+", '"+peoplename+"', "+servicestatusid+", "+feespecialid+", "+chargefee+", "+periodicalid+", "+startdate+", "+enddate+", "+isfeeflagid+", '"+remark+"')";
55 olderDao.getData(sqlStr);
56
57 return "redirect:/ajaxOperation.jsp";
58 }
59
60 @RequestMapping(value="/older/update")
61 public String update(Integer id, Integer peopleid, String peoplename, Integer servicestatusid,
62 Integer feespecialid, Double chargefee, Integer periodicalid,
63 Double startdate, Double enddate, Integer isfeeflagid, String remark) {
64 String sqlStr = "update peoplespecialcare set peopleid="+peopleid+", peoplename='"+peoplename+"', servicestatusid="+servicestatusid+", feespecialid="+feespecialid+", chargefee="+chargefee+", periodicalid="+periodicalid+", startdate="+startdate+", enddate="+enddate+", isfeeflagid="+isfeeflagid+", remark='"+remark+"' WHERE id="+id+"";
65 olderDao.getData(sqlStr);
66
67 return "redirect:/ajaxOperation.jsp";
68 }
69
70 }OlderController
package com.jackie.springmvc.ajax.dao;import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;import org.springframework.stereotype.Repository;import com.alibaba.fastjson.JSONArray;
import com.jackie.springmvc.ajax.entities.Older;@Repository
public class OlderDao {public int count = 0;public JSONArray getData(String sql) {String driver = "com.mysql.jdbc.Driver";String username = "root";String password = "zhao1110";String url = "jdbc:mysql://localhost:3306/fhsystem?user="+ username + "&password=" + password + "&useUnicode=true&characterEncoding=UTF-8";JSONArray array = new JSONArray();String sql1 = sql.substring(0, 6);try {Class.forName(driver);Connection con = DriverManager.getConnection(url);Statement stet = con.createStatement();if(sql1.equals("select")) {ResultSet rs = stet.executeQuery(sql);while(rs.next()){int id = rs.getInt("id");int peopleid = rs.getInt("peopleid");String peoplename = rs.getString("peoplename");int servicestatusid = rs.getInt("servicestatusid");int feespecialid = rs.getInt("feespecialid");double chargefee = rs.getDouble("chargefee");int periodicalid = rs.getInt("periodicalid");double startdate = rs.getDouble("startdate");double enddate = rs.getDouble("enddate");int isfeeflagid = rs.getInt("isfeeflagid");String remark = rs.getString("remark");double optime = rs.getDouble("optime");int opuserid = rs.getInt("opuserid");String opip = rs.getString("opip");String r1 = rs.getString("r1");String r2 = rs.getString("r2");String r3 = rs.getString("r3");String r4 = rs.getString("r4");String r5 = rs.getString("r5");count = rs.getRow();Older older = new Older(id, peopleid, peoplename, servicestatusid,feespecialid, chargefee, periodicalid, startdate, enddate,isfeeflagid, remark, optime, opuserid, opip, r1, r2, r3, r4, r5);array.add(older);/*System.out.println(" " + id + " " + peopleid + " " + peoplename+ " " + servicestatusid + " " + feespecialid + " " + chargefee+ " " + periodicalid + " " + startdate + " " + enddate+ " " + isfeeflagid + " " + remark + " " + optime+ " " + opuserid + " " + opip + " " + r1 + " " + r2+ " " + r3 + " " + r4); */}//System.out.println("转换JSON数据："); //System.out.println(array.toString());
rs.close();stet.close();con.close();} else {stet.executeUpdate(sql);stet.close();con.close();/*sql="insert into peoplespecialcare(id, peopleid, peoplename, servicestatusid,feespecialid, chargefee, periodicalid, startdate, enddate,isfeeflagid)values('"+id+"', '"+peopleid+"', '"+peoplename+"', '"+servicestatusid+"', '"+feespecialid+"', '"+chargefee+"', '"+periodicalid+"', '"+startdate+"', '"+enddate+"', '"+isfeeflagid"')";*/}} catch(java.lang.ClassNotFoundException e) { //加载JDBC错误,所要用的驱动没有找到 System.err.print("ClassNotFoundException"); //其他错误
System.err.println(e.getMessage()); } catch (SQLException ex) { //显示数据库连接错误或查询错误 System.err.println("SQLException: " + ex.getMessage()); } return array;}
}OlderDao.java
package com.jackie.springmvc.ajax.entities;public class Older {private Integer id;private Integer peopleid;private String peoplename;private Integer servicestatusid;private Integer feespecialid;private double chargefee;private Integer periodicalid;private double startdate;private double enddate;private Integer isfeeflagid;private String remark;private double optime;private Integer opuserid;private String opip;private String r1;private String r2;private String r3;private String r4;private String r5;public Integer getId() {return id;}public void setId(Integer id) {this.id = id;}public Integer getPeopleid() {return peopleid;}public void setPeopleid(Integer peopleid) {this.peopleid = peopleid;}public String getPeoplename() {return peoplename;}public void setPeoplename(String peoplename) {this.peoplename = peoplename;}public Integer getServicestatusid() {return servicestatusid;}public void setServicestatusid(Integer servicestatusid) {this.servicestatusid = servicestatusid;}public Integer getFeespecialid() {return feespecialid;}public void setFeespecialid(Integer feespecialid) {this.feespecialid = feespecialid;}public double getChargefee() {return chargefee;}public void setChargefee(double chargefee) {this.chargefee = chargefee;}public Integer getPeriodicalid() {return periodicalid;}public void setPeriodicalid(Integer periodicalid) {this.periodicalid = periodicalid;}public double getStartdate() {return startdate;}public void setStartdate(double startdate) {this.startdate = startdate;}public double getEnddate() {return enddate;}public void setEnddate(double enddate) {this.enddate = enddate;}public Integer getIsfeeflagid() {return isfeeflagid;}public void setIsfeeflagid(Integer isfeeflagid) {this.isfeeflagid = isfeeflagid;}public String getRemark() {return remark;}public void setRemark(String remark) {this.remark = remark;}public double getOptime() {return optime;}public void setOptime(double optime) {this.optime = optime;}public Integer getOpuserid() {return opuserid;}public void setOpuserid(Integer opuserid) {this.opuserid = opuserid;}public String getOpip() {return opip;}public void setOpip(String opip) {this.opip = opip;}public String getR1() {return r1;}public void setR1(String r1) {this.r1 = r1;}public String getR2() {return r2;}public void setR2(String r2) {this.r2 = r2;}public String getR3() {return r3;}public void setR3(String r3) {this.r3 = r3;}public String getR4() {return r4;}public void setR4(String r4) {this.r4 = r4;}public String getR5() {return r5;}public void setR5(String r5) {this.r5 = r5;}@Overridepublic String toString() {return "Older [id=" + id + ", peopleid=" + peopleid + ", peoplename="+ peoplename + ", servicestatusid=" + servicestatusid + ", feespecialid=" + feespecialid + ", chargefee=" + chargefee + ", periodicalid=" + periodicalid+ ", startdate=" + startdate + ", enddate=" + enddate + ", isfeeflagid=" + isfeeflagid + ", remark=" + remark + ", optime=" + optime + ", opuserid=" + opuserid + ", opip=" + opip + ", r1=" + r1 + ", r2=" + r2 + ", r3=" + r3 + ", r4=" + r4 + ", r5=" + r5 + "]";}public Older(Integer id, Integer peopleid, String peoplename, Integer servicestatusid,Integer feespecialid, double chargefee, Integer periodicalid, double startdate,double enddate, Integer isfeeflagid, String remark, double optime,Integer opuserid, String opip, String r1, String r2,String r3, String r4, String r5) {super();this.id = id;this.peopleid = peopleid;this.peoplename = peoplename;this.servicestatusid = servicestatusid;this.feespecialid = feespecialid;this.chargefee = chargefee;this.periodicalid = periodicalid;this.startdate = startdate;this.enddate = enddate;this.isfeeflagid = isfeeflagid;this.remark = remark;this.optime = optime;this.opuserid = opuserid;this.opip = opip;this.r1 = r1;this.r2 = r2;this.r3 = r3;this.r4 = r4;this.r5 = r5;}}Older.java
jsp代码
WebRoot目录下的三个jsp文件
主页面：ajaxOperation.jsp
1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
2 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
3 <%-- <%
4 response.setHeader("Content-Type","video/x-msvideo");
5 response.setHeader("Content-Disposition", "attachment;filename=aaa.doc");
6 response.header("content-type:application:json;charset=utf8");
7 response.header("Access-Control-Allow-Origin:*");
8 response.header("Access-Control-Allow-Methods:POST,GET,OPTIONS,DELETE");
9 response.header("Access-Control-Allow-Hefaders:x-requested-with,content-type");
10 %> --%>
11 <%
12 String path = request.getContextPath();
13 String basePath = request.getScheme() + "://"
14 + request.getServerName() + ":" + request.getServerPort()
15 + path + "/";
16 %>
17
18 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
19 <html>
20 <head>
21 <base href="<%=basePath%>">
22
23 <title>My JSP 'ajaxOperation.jsp' starting page</title>
24
25 <meta http-equiv="pragma" content="no-cache">
26 <meta http-equiv="cache-control" content="no-cache">
27 <meta http-equiv="expires" content="0">
28 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
29 <meta http-equiv="description" content="This is my page">
30 <script type="text/javascript" src="jQuery/jquery-3.2.1.js"></script>
31 <script>
32 $(document).ready(
33 function() {
34 $.ajax({
35 url : "http://192.168.43.158:8080/TestSpringMVC/olders",
36 type : "POST",
37 dataType : "json",
38 success : function(data) {
39 $.each(data.rows, function (index, item) {
40 //循环获取数据
41 var id = item.id;
42 var peopleid = item.peopleid;
43 var peoplename = item.peoplename;
44 var servicestatusid = item.servicestatusid;
45 var feespecialid = item.feespecialid;
46 var chargefee = item.chargefee;
47 var periodicalid = item.periodicalid;
48 var startdate = item.startdate;
49 var enddate = item.enddate;
50 var isfeeflagid = item.isfeeflagid;
51 var remark = item.remark;
52 $("#peopleTable").html($("#peopleTable").html() + "<tr>"
53 + "<td>"+ id + "</td>"+ "<td>"+ peopleid + "</td>"
54 + "<td>"+ peoplename + "</td>" + "<td>"+ servicestatusid + "</td>"
55 + "<td>"+ feespecialid + "</td>" + "<td>"+ chargefee + "</td>"
56 + "<td>"+ periodicalid + "</td>" + "<td>"+ startdate + "</td>"
57 + "<td>"+ enddate + "</td>" + "<td>"+ isfeeflagid + "</td>"
58 + "<td>"+ remark + "</td>"
59 + "<td>" + "<input type='button' value='删除' οnclick='Delete("+id+")' />" + "</td>"
60 + "<td>" + "<input type='button' value='修改' οnclick='Update("+id+")' />" + "</td>"
61 + "</tr>");
62 });
63 },
64 error : function() {
65 alert("数据访问错误");
66 }
67 });
68 });
69
70 //显示全部数据
71 function Show() {
72 $("#peopleTable").empty();
73 $("#peopleTable").html(
74 "<tr>" +
75 "<td>id</td>" +
76 "<td>peopleid</td>" +
77 "<td>peoplename</td>" +
78 "<td>servicestatusid</td>" +
79 "<td>feespecialid</td>" +
80 "<td>chargefee</td>" +
81 "<td>periodicalid</td>" +
82 "<td>startdate</td>" +
83 "<td>enddate</td>" +
84 "<td>isfeeflagid</td>" +
85 "<td>remark</td>" +
86 "<td>删除</td>" +
87 "<td>修改</td>" +
88 "</tr>");
89 $.ajax({
90 url : "http://192.168.43.158:8080/TestSpringMVC/olders",
91 type : "POST",
92 dataType : "json",
93 success : function(data) {
94 $.each(data.rows, function (index, item) {
95 //循环获取数据
96 var id = item.id;
97 var peopleid = item.peopleid;
98 var peoplename = item.peoplename;
99 var servicestatusid = item.servicestatusid;
100 var feespecialid = item.feespecialid;
101 var chargefee = item.chargefee;
102 var periodicalid = item.periodicalid;
103 var startdate = item.startdate;
104 var enddate = item.enddate;
105 var isfeeflagid = item.isfeeflagid;
106 var remark = item.remark;
107 $("#peopleTable").html($("#peopleTable").html() + "<tr>"
108 + "<td>"+ id + "</td>"+ "<td>"+ peopleid + "</td>"
109 + "<td>"+ peoplename + "</td>" + "<td>"+ servicestatusid + "</td>"
110 + "<td>"+ feespecialid + "</td>" + "<td>"+ chargefee + "</td>"
111 + "<td>"+ periodicalid + "</td>" + "<td>"+ startdate + "</td>"
112 + "<td>"+ enddate + "</td>" + "<td>"+ isfeeflagid + "</td>"
113 + "<td>"+ remark + "</td>"
114 + "<td>" + "<input type='button' value='删除' οnclick='Delete("+id+")' />" + "</td>"
115 + "<td>" + "<input type='button' value='修改' οnclick='Update("+id+")' />" + "</td>"
116 + "</tr>");
117 });
118 },
119 error : function() {
120 alert("数据访问错误");
121 }
122 });
123 }
124
125 //删除功能
126 function Delete(id) {
127 var oid = id;
128 if(confirm("确定要删除吗？")) {
129 $.ajax({
130 url : "http://192.168.43.158:8080/TestSpringMVC/older/delete",
131 data : {
132 "id":oid
133 },
134 });
135 alert("删除成功");
136 location.reload();
137 }
138 }
139
140 //查询功能
141 function Search() {
142 var opeoplename = $("#searchInput").val();
143 $.ajax({
144 url : "http://192.168.43.158:8080/TestSpringMVC/older/search",
145 type : "POST",
146 dataType : "json",
147 data : {
148 "peoplename":opeoplename
149 },
150 success : function(data) {
151 $("#peopleTable").html(
152 "<tr>" +
153 "<td>id</td>" +
154 "<td>peopleid</td>" +
155 "<td>peoplename</td>" +
156 "<td>servicestatusid</td>" +
157 "<td>feespecialid</td>" +
158 "<td>chargefee</td>" +
159 "<td>periodicalid</td>" +
160 "<td>startdate</td>" +
161 "<td>enddate</td>" +
162 "<td>isfeeflagid</td>" +
163 "<td>remark</td>" +
164 "<td>删除</td>" +
165 "<td>修改</td>" +
166 "</tr>");
167 $.each(data.rows, function (index, item) {
168 //循环获取数据
169 var id = item.id;
170 var peopleid = item.peopleid;
171 var peoplename = item.peoplename;
172 var servicestatusid = item.servicestatusid;
173 var feespecialid = item.feespecialid;
174 var chargefee = item.chargefee;
175 var periodicalid = item.periodicalid;
176 var startdate = item.startdate;
177 var enddate = item.enddate;
178 var isfeeflagid = item.isfeeflagid;
179 var remark = item.remark;
180 $("#peopleTable").html($("#peopleTable").html() + "<tr>"
181 + "<td>"+ id + "</td>"+ "<td>"+ peopleid + "</td>"
182 + "<td>"+ peoplename + "</td>" + "<td>"+ servicestatusid + "</td>"
183 + "<td>"+ feespecialid + "</td>" + "<td>"+ chargefee + "</td>"
184 + "<td>"+ periodicalid + "</td>" + "<td>"+ startdate + "</td>"
185 + "<td>"+ enddate + "</td>" + "<td>"+ isfeeflagid + "</td>"
186 + "<td>"+ remark + "</td>"
187 + "<td>" + "<input type='button' value='删除' οnclick='Delete("+id+")' />" + "</td>"
188 + "<td>" + "<input type='button' value='修改' οnclick='Update("+id+")' />" + "</td>"
189 + "</tr>");
190 });
191 },
192 error : function() {
193 alert("查询失败");
194 }
195 });
196 }
197
198 //添加功能
199 function Add() {
200 window.location.href = "http://192.168.43.158:8080/TestSpringMVC/addWindow.jsp";
201 }
202
203 //修改功能
204 function Update(id) {
205 var oid = id;
206 window.location.href = "http://192.168.43.158:8080/TestSpringMVC/updateWindow.jsp?id="+oid;
207 }
208 </script>
209 </head>
210
211 <body>
212 <br>
213 请输入所查询的老人姓名:
214 <input type="text" id="searchInput" value=""/>
215 <input type="button" value="查询" id="searchButton" οnclick="Search()"/>
216 <input type="button" value="添加老人" id="addButton" οnclick="Add()"/>
217 <input type="button" value="显示全部数据" id="showButton" οnclick="Show()"/>
218 <br><br>
219 <table id="peopleTable" border="1" cellpadding="10" cellspacing="0">
220 <tr>
221 <td>id</td>
222 <td>peopleid</td>
223 <td>peoplename</td>
224 <td>servicestatusid</td>
225 <td>feespecialid</td>
226 <td>chargefee</td>
227 <td>periodicalid</td>
228 <td>startdate</td>
229 <td>enddate</td>
230 <td>isfeeflagid</td>
231 <td>remark</td>
232 <td>删除</td>
233 <td>修改</td>
234 </tr>
235 </table>
236 </body>
237 </html>ajaxOperation.jsp
添加页面：addWindow.jsp
1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <% 3 String path = request.getContextPath(); 4 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 5 %> 6 7 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 8 <html> 9 <head> 10 <base href="<%=basePath%>"> 11 12 <title>添加界面</title> 13 14 <meta http-equiv="pragma" content="no-cache"> 15 <meta http-equiv="cache-control" content="no-cache"> 16 <meta http-equiv="expires" content="0"> 17 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 18 <meta http-equiv="description" content="This is my page"> 19 </head> 20 21 <body> 22 <form action="http://192.168.43.158:8080/TestSpringMVC/older/add" method="POST"> 23 id:<input type="text" name="id"><br> 24 peopleid:<input type="text" name="peopleid"><br> 25 peoplename:<input type="text" name="peoplename"><br> 26 servicestatusid:<input type="text" name="servicestatusid"><br> 27 feespecialid:<input type="text" name="feespecialid"><br> 28 chargefee:<input type="text" name="chargefee"><br> 29 periodicalid:<input type="text" name="periodicalid"><br> 30 startdate:<input type="text" name="startdate"><br> 31 enddate:<input type="text" name="enddate"><br> 32 isfeeflagid:<input type="text" name="isfeeflagid"><br> 33 remark:<input type="text" name="remark"><br> 34 <input type="submit" value="添加"> 35 </form> 36 </body> 37 </html>
addWindow.jsp
修改页面：updateWindow.jsp
1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
2 <%
3 String path = request.getContextPath();
4 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
5 %>
6
7 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
8 <html>
9 <head>
10 <base href="<%=basePath%>">
11
12 <title>修改界面</title>
13
14 <meta http-equiv="pragma" content="no-cache">
15 <meta http-equiv="cache-control" content="no-cache">
16 <meta http-equiv="expires" content="0">
17 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
18 <meta http-equiv="description" content="This is my page">
19 <script type="text/javascript" src="jQuery/jquery-3.2.1.js"></script>
20 </head>
21
22 <body>
23 <form action="http://192.168.43.158:8080/TestSpringMVC/older/update" method="POST">
24 <input type="hidden" name="id" value="<%=(String)request.getParameter("id") %>">
25 peopleid:<input type="text" name="peopleid"><br>
26 peoplename:<input type="text" name="peoplename"><br>
27 servicestatusid:<input type="text" name="servicestatusid"><br>
28 feespecialid:<input type="text" name="feespecialid"><br>
29 chargefee:<input type="text" name="chargefee"><br>
30 periodicalid:<input type="text" name="periodicalid"><br>
31 startdate:<input type="text" name="startdate"><br>
32 enddate:<input type="text" name="enddate"><br>
33 isfeeflagid:<input type="text" name="isfeeflagid"><br>
34 remark:<input type="text" name="remark"><br>
35 <input type="submit" value="确认修改" />
36 </form>
37 </body>
38 </html>updateWindow.jsp
注意！别忘在WebRoot目录下新建jQuery文件夹，放入jquery.js
另外
当时捣鼓如何连接数据库的时候建了个DB Brower，不知道用没用上，有时间我会弄明白它。（运行程序的时候，这个是未打开状态。）
填坑：DB Browser类似于Navicat，但是相对操作要稍麻烦一些，好处是不用根据表写javabean了。
查询功能效果界面
删除功能效果界面
转载于:https://www.cnblogs.com/overfly/p/7412154.html
基于springmvc、ajax，后台连接数据库的增删改查相关推荐
- 基于Python Flask框架+jquery Ajax技术实现的增删改查（CRUD）+Ajax的异步文件上传
运行界面(话不多说先上图) 运行之后的index界面,有登陆.注册功能 登陆界面,输入数据库中用户名.密码不为空且密码是加密的数据,进入main界面 注册界面,用的bootstrop的弹窗,用户名和密 ...
- mysql源生插入数据_php+mysql源生连接数据库和增删改查数据
php+mysql源生连接数据库和增删改查数据 新建一个init.php文件,执行链接数据库.内容如下 header("Content-type: text/html; charset=ut ...
- 数据库实验IDEA编程Java程序实现连接数据库以及增删改查JDBC
IDEA编程Java程序实现连接数据库以及增删改查JDBC IDEA的mysql环境配置建议参考该博客:戳我 我用的是java11和此博客的配置略有出入,不过一般的问题都可以百度解决 这是我实验用的数 ...
- 使用SpringBoot一小时快速搭建一个简单后台管理（增删改查）（超详细教程）
最近也是临近期末了,各种的期末大作业,后台管理也是很多地方需要用到的,为了方便大家能快速上手,快速搭建一个简单的后台管理,我花了两天时间整理了一下 我会从0开始介绍,从数据库的设计到前端页面的引入最后 ...
- 可编辑树Ztree的使用（包括对后台数据库的增删改查）
找了很多网上关于Ztree的例子和代码才搞定. 首先,关于Ztree的代码不介绍了,网上下载之后,引用下列四个文件就能使用了. 1.关于配置选项.主要通过回调函数来实现向后台发送数据,实现增删改查. ...
- 基于 spring boot 实现用户的增删改查
基于登录实现后 在此我们更深一步地实现用户的增删改查(用户登录的实现在我的另一篇文章中) 其实从整体上来说,用户的增删改查和用户登录大同小异 主要是处理好各个层之间的关系 这里源码奉上 实体类 bea ...
- php连接数据库实现增删改查,PHP连接数据库,实现最基本的增删改查(面向过程)
在我们把PHP的环境搭建好以后,我们来看一下怎样通过PHP连接MySQL数据库,以及怎样实现最基本的增删改查.其它就不多说了,直接上代码吧. 1.PHP连接MySQL数据库 1 2 3 4 5 6 7 ...
- 一 创建form表单并实现后台数据的增删改查
思路:form表单创建,提交后上传用户信息到数据库,创建后台,可实现增删改查. 1 enroll.php <实现form表单的创建,并且可以提交到数据库中> <!DO ...
- node.js学习day03 通过node.js连接数据库实现增删改查
通过node.js连接mysql数据库实现增删改查 1. npm i mysql 导入mysql模块 2.熟悉数据库增删改查 3.建立连接 通过mysql.createPool 4.案例 const ...
最新文章
- boost::safe_numerics模块实现数据类型下溢的测试程序
- 网易前端微专业，JavaScript程序设计基础篇:数组
- nndl学习笔记（一）反向传播公式总结
- day10-包的定义和内部类
- bind 启动redis_详解Redis开启远程登录连接
- 指导行为--数据分析价值之源
- Stamps 邮票问题 详解（C++）
- Atitit ati teck trend技术趋势资料包 C:\onedriver\OneDrive\Documents\0 it impttech topic\ati teck trend技术趋
- STM32G0系列的启动配置与程序下载
- 计算机室教学控制软件,管鲍多媒体电子教室 电脑教学软件 广播教学软件 机房控制软件...
- October CMS - 快速入门 3 创建主题
- 怎样利用闲鱼赚差价？教你在闲鱼卖货赚钱！
- 新一代 IT 服务管理平台 DOSM，助力企业数字化转型
- matlab中portcons,Matlab在马柯维茨均值-方差模型的简单应用.ppt
- 计算机开机变慢的十大原因
- window11安装JDK1.8【jdk-8u121】
- 域名限制注册有哪些原因？
- mac删除文件恢复_如何在Mac上恢复已删除的文件
- 2022国赛数模A题思路以及解析（附源码 可供学习训练使用）
- 双二极管钳位电路的原理分析