在看此文章之前我们需要阅读以下两个文章、他们是关联关系!!! 要是基础很牢固不看也可以!
第一章:【Java+Springboot】----- 通过Idea快速创建SpringBoot项目操作方法_idea快速开启springboot项目-CSDN博客
第二章:【Java+Springboot】------ 通过JDBC+GetMapping方法进行数据select查询、多种方式传参、最简单的基本示例!-CSDN博客
我使用的数据库为:PostGresql
功能需求:对岗位进行新增、更新、删除操作!!
一、如何执行 Insert 新增 一条岗位数据!岗位名称:总经理2
1. 先再前端创建fnAjax的公用方法,使用 ajax 方法进行post传输方式。
var fnAjax= function(v_data,v_url,fnSuccess,fnError) { $.ajax({ url: v_url, data: v_data, type: 'POST', beforeSend:function(){ }, success: function (response, options) { var ret = JSON.parse(response); if(ret.success==1){ fnSuccess(ret); }else{ fnError(ret); } }, error: function (response, options) { } }); }
2. 然后调用fnAjax方法传入参数
//新增数据 var fn_add_data=function (id,cname) { //数据json var json={ ID:id, CNAME:cname }; // /add/Mulitdata 后台新增数据的方法 fnAjax(json,"/add/Mulitdata",function (ret) { if(ret.success=="1"){ layer.msg(ret.message); } }) } fn_add_data("104e70bb-9dfb-4c15-84e9-a2f700025b","总经理2");//传入参数
3. 后台进行处理新增数据
/*** * 新增岗位名称 * ***/ @RequestMapping("/add/Mulitdata") public IMXResponse fn_add_Mulitdata (HttpServletRequest request, HttpServletResponse response)throws Exception { IMXResponse ret=new IMXResponse(); request.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); String v_id = request.getParameter("ID"); String v_cname = request.getParameter("CNAME"); try{ // SQL 语句 String sql = "INSERT INTO \"HR_JOB\" (\"ID\",\"CNAME\") VALUES (?, ?)"; // 使用update方法添加数据 int isadd= jdbcTemplate.update(sql, v_id, v_cname); if(isadd==1){ ret.setSuccess(1); ret.setMessage("新增成功"); }else{ ret.setSuccess(1); ret.setMessage("新增失败"); } // System.out.println("------"); } catch (Exception e) { e.printStackTrace(); ret.setMessage("获取失败"); ret.setSuccess(0); } finally { } return ret; }
结果:
二、如何 更新(update)岗位名称 数据!
2.1 使用fnAjax方法传入参数 把岗位名称:【总经理2】 更新为【总经理3】
//更新数据 var fn_update_data=function (id,cname) { var json={ ID:id, CNAME:cname }; fnAjax(json,"/update/Mulitdata",function (ret) { if(ret.success=="1"){ layer.msg(ret.message); } }) } fn_update_data("104e70bb-9dfb-4c15-84e9-a2f700025b","总经理3");
2.2 后台进行处理更新数据
/*** * 更新岗位名称 * ***/ @RequestMapping("/update/Mulitdata") public IMXResponse fn_update_Mulitdata (HttpServletRequest request, HttpServletResponse response)throws Exception { IMXResponse ret=new IMXResponse(); request.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); String v_id = request.getParameter("ID"); String v_cname = request.getParameter("CNAME"); try{ // SQL 语句 String sql = "UPDATE \"HR_JOB\" SET \"CNAME\"=? WHERE \"ID\"=?"; // 使用update方法添加数据 int isadd= jdbcTemplate.update(sql,v_cname, v_id); if(isadd==1){ ret.setSuccess(1); ret.setMessage("更新成功"); }else{ ret.setSuccess(1); ret.setMessage("更新失败"); } } catch (Exception e) { e.printStackTrace(); ret.setMessage("获取失败"); ret.setSuccess(0); } finally { } return ret; }
结果:
三、如何 删除(delete)岗位名称:总经理3 的数据!
3.1 使用fnAjax方法传入参数 参数:岗位ID
//删除数据 var fn_delete_data=function (id) { var json={ ID:id }; fnAjax(json,"/delete/Mulitdata",function (ret) { if(ret.success=="1"){ layer.msg(ret.message); } }) } fn_delete_data("104e70bb-9dfb-4c15-84e9-a2f75099815b");
3.2 后台处理删除数据
/*** * 删除岗位名称 * ***/ @RequestMapping("/delete/Mulitdata") public IMXResponse fn_delete_Mulitdata (HttpServletRequest request, HttpServletResponse response)throws Exception { IMXResponse ret=new IMXResponse(); request.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); String v_id = request.getParameter("ID"); String v_cname = request.getParameter("CNAME"); try{ // SQL 语句 String sql = "DELETE FROM \"HR_JOB\" WHERE \"ID\"=?"; // 使用update方法添加数据 int isadd= jdbcTemplate.update(sql, v_id); if(isadd==1){ ret.setSuccess(1); ret.setMessage("更新成功"); }else{ ret.setSuccess(1); ret.setMessage("更新失败"); } ret.setSuccess(1); ret.setData(""); // System.out.println("------"); } catch (Exception e) { e.printStackTrace(); ret.setMessage("获取失败"); ret.setSuccess(0); } finally { } return ret; }
四、完整代码
4.1 前端HTML代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="/libs/jquery/jquery.min.js"></script> <script> var fnAjax= function(v_data,v_url,fnSuccess,fnError) { $.ajax({ url: v_url, data: v_data, type: 'POST', beforeSend:function(){ }, success: function (response, options) { var ret = JSON.parse(response); if(ret.success==1){ fnSuccess(ret); }else{ fnError(ret); } }, error: function (response, options) { } }); } //新增数据 var fn_add_data=function (id,cname) { var json={ ID:id, CNAME:cname }; fnAjax(json,"/add/Mulitdata",function (ret) { if(ret.success=="1"){ layer.msg(ret.message); } }) } // fn_add_data("104e70bb-9dfb-4c15-84e9-a2f700025b","总经理2"); //更新数据 var fn_update_data=function (id,cname) { var json={ ID:id, CNAME:cname }; fnAjax(json,"/update/Mulitdata",function (ret) { if(ret.success=="1"){ layer.msg(ret.message); } }) } // fn_update_data("104e70bb-9dfb-4c15-84e9-a2f700025b","总经理3"); //删除数据 var fn_delete_data=function (id) { var json={ ID:id }; fnAjax(json,"/delete/Mulitdata",function (ret) { if(ret.success=="1"){ layer.msg(ret.message); } }) } fn_delete_data("104e70bb-9dfb-4c15-84e9-a2f75099815b"); </script> </body> </html>
4.2 后台完整代码如下:
package com.dcs.lybdemo.controller; import com.dcs.lybdemo.common.IMXResponse; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.jdbc.core.JdbcTemplate; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @RestController public class JobController { private final JdbcTemplate jdbcTemplate; @Autowired public JobController(JdbcTemplate jdbcTemplate) { this.jdbcTemplate = jdbcTemplate; } /*** * 新增岗位名称 * ***/ @RequestMapping("/add/Mulitdata") public IMXResponse fn_add_Mulitdata (HttpServletRequest request, HttpServletResponse response)throws Exception { IMXResponse ret=new IMXResponse(); request.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); String v_id = request.getParameter("ID"); String v_cname = request.getParameter("CNAME"); try{ // SQL 语句 String sql = "INSERT INTO \"HR_JOB\" (\"ID\",\"CNAME\") VALUES (?, ?)"; // 使用update方法添加数据 int isadd= jdbcTemplate.update(sql, v_id, v_cname); if(isadd==1){ ret.setSuccess(1); ret.setMessage("新增成功"); }else{ ret.setSuccess(1); ret.setMessage("新增失败"); } // System.out.println("------"); } catch (Exception e) { e.printStackTrace(); ret.setMessage("获取失败"); ret.setSuccess(0); } finally { } return ret; } /*** * 更新岗位名称 * ***/ @RequestMapping("/update/Mulitdata") public IMXResponse fn_update_Mulitdata (HttpServletRequest request, HttpServletResponse response)throws Exception { IMXResponse ret=new IMXResponse(); request.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); String v_id = request.getParameter("ID"); String v_cname = request.getParameter("CNAME"); try{ // SQL 语句 String sql = "UPDATE \"HR_JOB\" SET \"CNAME\"=? WHERE \"ID\"=?"; // 使用update方法添加数据 int isadd= jdbcTemplate.update(sql,v_cname, v_id); if(isadd==1){ ret.setSuccess(1); ret.setMessage("更新成功"); }else{ ret.setSuccess(1); ret.setMessage("更新失败"); } ret.setSuccess(1); ret.setData(""); // System.out.println("------"); } catch (Exception e) { e.printStackTrace(); ret.setMessage("获取失败"); ret.setSuccess(0); } finally { } return ret; } /*** * 删除岗位名称 * ***/ @RequestMapping("/delete/Mulitdata") public IMXResponse fn_delete_Mulitdata (HttpServletRequest request, HttpServletResponse response)throws Exception { IMXResponse ret=new IMXResponse(); request.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); String v_id = request.getParameter("ID"); String v_cname = request.getParameter("CNAME"); try{ // SQL 语句 String sql = "DELETE FROM \"HR_JOB\" WHERE \"ID\"=?"; // 使用update方法添加数据 int isadd= jdbcTemplate.update(sql, v_id); if(isadd==1){ ret.setSuccess(1); ret.setMessage("更新成功"); }else{ ret.setSuccess(1); ret.setMessage("更新失败"); } ret.setSuccess(1); ret.setData(""); // System.out.println("------"); } catch (Exception e) { e.printStackTrace(); ret.setMessage("获取失败"); ret.setSuccess(0); } finally { } return ret; } }