前言

　　　前段時間在博客園上找了一個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 請輸入所查詢的老人姓名:&nbsp;&nbsp; 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，后台连接数据库的增删改查的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。