SSM 增、删（ajax）
来源：互联网 发布：淘宝网西服 编辑：程序博客网 时间：2024/06/11 02:01
本来搭好了环境是用.jsp来完成这项工作的，奈何写好后一直无法连接数据库获取数据，折腾了一天试了各种方法都不行，最终放弃了….改用.html代替
先发下我的目录吧，仅供参考 
**
springmvc配置：
使用.jsp时如下：
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <property name="prefix" value="/WEB-INF/" /> <property name="suffix" value=".jsp" /> </bean>改为html后男票给了段代码，据说里面也有很深的坑..我就没有细究了，直接拿来用
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <property name="order" value="10"></property> <property name="prefix" value="/WEB-INF/pages/"></property> <property name="contentType" value="text/html"></property> </bean>需要下载jquery-3.2.1.min.js并在html中导入
<script src="/js/jquery-3.2.1.min.js"></script>index界面代码：
id：<input type="text" name="userid" id="p1"/><br/> 账号：<input type="text" name="username" id="p2"/><br/> 密码： <input type="text" name="password" id="p3"/><br/> <input type="submit" value="submit" id="register"/> <input type="submit" value="delete" id="delete"/>controller中index的代码（也是我设置的Tomcat的默认访问路径）：
@RequestMapping(value = "/index") public ModelAndView index() { ModelAndView mav = new ModelAndView(); mav.setViewName("index.html");//index.jsp return mav; }下面使用ajax来传递数据，这里我用delete方式做例子
一、post方式
index.html代码：
<script>$("#delete").click(function () { var jsonData={}; jsonData.userid=$("#p1").val(); $.ajax({ type: "get", url: "/doDelete", dataType: 'json', contentType: "application/json;charset=utf-8", data: JSON.stringify(jsonData), success: function (data) { if(data == -1) alert("该用户不存在"); else $(location).attr('href', 'bank'); }, error: function (XMLHttpRequest, textStatus, errorThrown) { console.log(XMLHttpRequest.status); console.log(XMLHttpRequest.readyState); console.log(textStatus); } }); });</script>controller代码
@RequestMapping(value = "/doDelete") @ResponseBody public Integer doDelete( @RequestBody User user) { Integer result; Integer userid=user.getUserid(); try{ result=userService.delete(userid); }catch(Exception e){ result = -1; } System.out.println(result+" "+userid); return result; }这里有必要附上add的方法给大家做参考，因为jsonData此处为一个对象，看它获取userid调用的
jsonData.userid=$("#p1").val();就可以知道。而之前ssm给的默认代码里，delete传入的是Interger，而add传入的是**对象**user，所以add中可以直接使用，而delete中需要先传入对象，再从对象中getuserid来进行接下来的操作，如果直接将传入类型定为Interger会出现数据类型不匹配的问题。
ajax
<script> $(document).ready(function() { $("#register").click(function () { var jsonData={}; jsonData.username=$("#p2").val(); jsonData.password=$("#p3").val(); $.ajax({ type: "post", url: "/doRegister", dataType: 'json', contentType: "application/json;charset=utf-8", data: JSON.stringify(jsonData), success: function (data) { if(data == -1) alert("用户名已经被注册"); else $(location).attr('href', 'bank'); }, error: function (XMLHttpRequest, textStatus, errorThrown) { console.log(XMLHttpRequest.status); console.log(XMLHttpRequest.readyState); console.log(textStatus); } }); });</script>controller
@RequestMapping(value = "/doRegister",method = RequestMethod.POST) @ResponseBody public Integer doRegister(@RequestBody User user) { Integer result; try{ result=userService.add(user); }catch(Exception e){ result = -1; } return result; }二、GET方式
真的没写过get方式啊啊啊啊啊啊，上网查大家也都是用的post啊啊啊啊啊，此处艰辛难以言表，又用了半天的时间才写出来……据男票大大说采用的是restful的（风格？）反正我又发挥了我的观察和模仿能力【微笑】，最后男票大大亲临才给我讲明白的…
ajax：
$("#delete").click(function () { $.ajax({ url: "/deDelete/"+$("#p1").val(), method : "get" , data : { }, dataType : "json", success : function(data){ if(data == -1) alert("该用户不存在"); else $(location).attr('href', 'bank'); }, error : function (XMLHttpRequest, textStatus, errorThrown) { console.log(XMLHttpRequest.status); console.log(XMLHttpRequest.readyState); console.log(textStatus); } }) });controller：
@RequestMapping(value="/deDelete/{userid}",method=RequestMethod.GET,produces="application/json;charset=UTF-8") public @ResponseBody Integer doDelete(@PathVariable("userid") Integer userid){ Integer result; try{ result=userService.delete(userid); }catch(Exception e){ result = -1; } System.out.println(result+" "+userid); return result; }这里要注意get方式url的书写方式，因为需要在url中显示获取的信息所以不需要像post那样用变量来获取userid了，直接写在url后面就可以了，注意是附在引号外面的。我卡在这里主要是基础不扎实的缘故…get和post一直混乱分不清。
然后就是要注意url和controller中value值的对应
以及@PathVariable("userid")，这里与post区别较大
其实到现在很多注解我都是知其然不知其所以然…基本也是模仿着别人写的，自己写代码的时间太少了所以经验不足，以后要多加努力哦~~不管怎么说到现在进步都很多了。
最后附上ssm增加、删除两份的完整代码
访问index.html，输入数据，选择注册或者删除，然后跳转到bank.html界面显示数据库中的所有用户数据
controller：
@Controller@RequestMapping("")public class DemoAction { private UserService userService; @Autowired public void setUserService(UserService userService) { this.userService = userService; }//doregister @RequestMapping(value = "/doRegister",method = RequestMethod.POST) @ResponseBody public Integer doRegister(@RequestBody User user) { Integer result; try{ result=userService.add(user); }catch(Exception e){ result = -1; } return result; } //doDelete /* @RequestMapping(value = "/doDelete") @ResponseBody public Integer doDelete( @RequestBody User user) { Integer result; Integer userid=user.getUserid(); try{ result=userService.delete(userid); }catch(Exception e){ result = -1; } System.out.println(result+" "+userid); return result; }*/ @RequestMapping(value="/deDelete/{userid}",method=RequestMethod.GET,produces="application/json;charset=UTF-8") public @ResponseBody Integer doDelete(@PathVariable("userid") Integer userid){ Integer result; try{ result=userService.delete(userid); }catch(Exception e){ result = -1; } System.out.println(result+" "+userid); return result; } //out @RequestMapping(value = "/out",method = RequestMethod.POST) @ResponseBody public List<User> out() { List<User> us=new ArrayList<User>() ; us=userService.list(); return us; } //http://localhost/index @RequestMapping(value = "/index") public ModelAndView index() { ModelAndView mav = new ModelAndView(); mav.setViewName("index.html");//index.jsp return mav; } //http://localhost/bank @RequestMapping(value = "/bank") public ModelAndView bank() { ModelAndView mav = new ModelAndView(); mav.setViewName("bank.html");//bank.jsp return mav; }}index.html：
<!DOCTYPE html><!-- saved from url=(0098)http://www.17sucai.com/preview/501914/2017-05-17/p2p%E6%89%8B%E6%9C%BA%E5%85%A8%E7%AB%99/info.html --><html><head> <script src="/js/jquery-3.2.1.min.js"></script></head><body> id：<input type="text" name="userid" id="p1"/><br/> 账号：<input type="text" name="username" id="p2"/><br/> 密码： <input type="text" name="password" id="p3"/><br/> <input type="submit" value="submit" id="register"/> <input type="submit" value="delete" id="delete"/><script> $(document).ready(function() { $("#register").click(function () { var jsonData={}; jsonData.username=$("#p2").val(); jsonData.password=$("#p3").val(); $.ajax({ type: "post", url: "/doRegister", dataType: 'json', contentType: "application/json;charset=utf-8", data: JSON.stringify(jsonData), success: function (data) { if(data == -1) alert("用户名已经被注册"); else $(location).attr('href', 'bank'); }, error: function (XMLHttpRequest, textStatus, errorThrown) { console.log(XMLHttpRequest.status); console.log(XMLHttpRequest.readyState); console.log(textStatus); } }); }); /* $("#delete").click(function () { var jsonData={}; jsonData.userid=$("#p1").val(); $.ajax({ type: "get", url: "/doDelete", dataType: 'json', contentType: "application/json;charset=utf-8", data: JSON.stringify(jsonData), success: function (data) { if(data == -1) alert("该用户不存在"); else $(location).attr('href', 'bank'); }, error: function (XMLHttpRequest, textStatus, errorThrown) { console.log(XMLHttpRequest.status); console.log(XMLHttpRequest.readyState); console.log(textStatus); } }); }); */ $("#delete").click(function () { $.ajax({ url: "/deDelete/"+$("#p1").val(), method : "get" , data : { }, dataType : "json", success : function(data){ if(data == -1) alert("该用户不存在"); else $(location).attr('href', 'bank'); }, error : function (XMLHttpRequest, textStatus, errorThrown) { console.log(XMLHttpRequest.status); console.log(XMLHttpRequest.readyState); console.log(textStatus); } }) }); });</script></body></html>bank.html：
<!DOCTYPE html><!-- saved from url=(0098)http://www.17sucai.com/preview/501914/2017-05-17/p2p%E6%89%8B%E6%9C%BA%E5%85%A8%E7%AB%99/info.html --><html><head> <script src="/js/jquery-3.2.1.min.js"></script></head><body> id：<input type="text" name="userid" id="p1"/><br/> 账号：<input type="text" name="username" id="p2"/><br/> 密码： <input type="text" name="password" id="p3"/><br/> <input type="submit" value="submit" id="register"/> <input type="submit" value="delete" id="delete"/><script> $(document).ready(function() { $("#register").click(function () { var jsonData={}; jsonData.username=$("#p2").val(); jsonData.password=$("#p3").val(); $.ajax({ type: "post", url: "/doRegister", dataType: 'json', contentType: "application/json;charset=utf-8", data: JSON.stringify(jsonData), success: function (data) { if(data == -1) alert("用户名已经被注册"); else $(location).attr('href', 'bank'); }, error: function (XMLHttpRequest, textStatus, errorThrown) { console.log(XMLHttpRequest.status); console.log(XMLHttpRequest.readyState); console.log(textStatus); } }); }); /* $("#delete").click(function () { var jsonData={}; jsonData.userid=$("#p1").val(); $.ajax({ type: "get", url: "/doDelete", dataType: 'json', contentType: "application/json;charset=utf-8", data: JSON.stringify(jsonData), success: function (data) { if(data == -1) alert("该用户不存在"); else $(location).attr('href', 'bank'); }, error: function (XMLHttpRequest, textStatus, errorThrown) { console.log(XMLHttpRequest.status); console.log(XMLHttpRequest.readyState); console.log(textStatus); } }); }); */ $("#delete").click(function () { $.ajax({ url: "/deDelete/"+$("#p1").val(), method : "get" , data : { }, dataType : "json", success : function(data){ if(data == -1) alert("该用户不存在"); else $(location).attr('href', 'bank'); }, error : function (XMLHttpRequest, textStatus, errorThrown) { console.log(XMLHttpRequest.status); console.log(XMLHttpRequest.readyState); console.log(textStatus); } }) }); });</script></body></html>userSevice：
@Servicepublic class UserService { private UserMapper userMapper; @Autowired public void setUserMapper(UserMapper userMapper) { this.userMapper = userMapper; } public List<User> list(){ return userMapper.list(); } public Integer add(User user){ return userMapper.insert(user); } public Integer delete(Integer userid){ return userMapper.deleteByPrimaryKey(userid); }}mapper和user我就不写了..太简单了
以上是这三天的痛苦挣扎结果…虽然很简单的东西但是因为没有基础做起来还是真的很辛苦的，遇到了无数个报错，真的是有时候都要放弃了…
至少写完后整个流程终于清楚多了…可喜可贺= =干巴爹~~
阅读全文
1 0
- SSM 增、删（ajax）
- Ajax异步添加数据（SSM框架）
- 406 ajax ssm
- ssm 中 ajax json
- SSM（Spring,springmvc,mybatis）+maven+AJAX实现分页功能
- ajax+json进行数据传输请求（ssm框架）
- SSM+JQuery+Ajax登录验证
- chartJS+ajax+ssm简单整合
- SSM框架下的二手教材交易系统之用户登录（包括表单提前验证,ajax）
- SSM框架---二手教材交易系统之用户登录（包括表单提前验证,ajax）
- ssm框架中controller层的json处理（运用ajax）
- SSM+Ajax 实现上传实例（包含文件和其他属性）
- 前后台数据交互（ajax、json、ssm、跨域访问）
- Ajax实现，下拉框值改变，异步查询并改变表格内容（SSM框架）
- ssm + ajax过程中遇到的问题
- 简单实用ssm+json+ajax三级联动
- Ajax之在SSM中的json用法
- ssm中ajax传值实例
- GJJ来签到
- 01.Lua笔记_基础语法部分
- 1032. 挖掘机技术哪家强(20)
- Caffe学习笔记——Caffe的三级结构(Blobs,Layers,Nets)
- sublime插件推荐
- SSM 增、删（ajax）
- hdu 6143 Killer Names
- dp day2/3-区间dp
- c++ c# opencv dll 调用的方法
- angular4小星星评分功能代码
- 面向对象的第一个特征：封装II
- POJ
- Caffe中卷积的实现细节（涉及到BaseConvolutionLayer、ConvolutionLayer、im2col等）
- unique去重函数
