jquery+ajaxform+springboot控件实现数据更新功能


Posted in jQuery onJanuary 22, 2018

应用背景

使用springboot架构在如下图所示的界面布局中,实现数据的保存或者更新,务必需要提交到后台,如何进行成功或失败的提示呢?如果使用传统的springmvc的模式,势必要传一个页面给前端,这个页面仅仅是提示操作是否成功了!提示之后还得更新一下数据,就好比我们浏览某些网站的时候给出的一些提示 操作成功,5秒后返回

比较傻,客户体验也比较差劲。

jquery+ajaxform+springboot控件实现数据更新功能 

改造历程

使用ajax能否解决上述的问题呢?

答案是肯定的,点击保存之后,一个ajax请求到后台,使用ResponseBody标签,限制返回的仅仅是数据。然后根据返回的数据给出相应的提示信息就可以了。

传统的ajax请求数据,需要将form里面的数据重组,全部放到我们的请求体里面。如下代码所示:

$.ajax({
 type: 'POST',
 url: url,
 data: data,
 success: success,
 dataType: dataType
});

如果,我提交的form数据比较多的话,那么data就相对比较庞大了。代码比较臃肿。同时,form表单也丧失了其存在的意义了。

有没有一种比较优雅的方式实现form表单的ajax提交呢?当然。

jquery的ajaxform插件是一个比较不错的选择。

实现过程

第一步。当然是引入我们强大的插件了。

<script src="static/assets/js/jquery.form.min.js"></script>

该js下载,我提供一下github的地址吧: https://github.com/jquery-form/form 。

第二步。在我们想要发送请求的地方进行ajax+form请求的发送。

function insert() {
    var options = {
     // target:  '#output1', // 用服务器返回的数据 更新 id为output1的内容.
     // beforeSubmit: showRequest, // 提交前
     success:  showResponse, // 提交后
     //另外的一些属性:
     //url:  url   // 默认是form的action,如果写的话,会覆盖from的action.
     //type:  type  // 默认是form的method,如果写的话,会覆盖from的method.('get' or 'post').
     //dataType: null  // 'xml', 'script', or 'json' (接受服务端返回的类型.)
     //clearForm: true  // 成功提交后,清除所有的表单元素的值.
     resetForm: false  // 成功提交后,重置所有的表单元素的值.
     //由于某种原因,提交陷入无限等待之中,timeout参数就是用来限制请求的时间,
     //当请求大于3秒后,跳出请求.
     //timeout: 3000
    };
    //'ajaxForm' 方式的表单 .
    $('#baseForm').ajaxSubmit(options);
   }

处理一下提交后返回的方法

// 提交后
   function showResponse(responseText, statusText) {
    alert('状态: ' + statusText + '\n 返回的内容是: \n' + responseText);
    
   }

后台实现代码

@RequestMapping("/basicSave")
 @ResponseBody
 public String BasicSave(PointInfo pi){
  if(!pi.getSaddress().equals("")){
   pi.setType("1");
  }else{
   pi.setType("0");
  }
  int newId = pointInfoService.saveorupdate(pi);
  return newId+"";
 }

逻辑自行定义

注意

  • 提交的时候一定要使用ajaxSubmit方法
  • 提交的action,请求方式(post还是get)、dataType(json、xml)等默认都采用的form里面的数据,如果在参数里面进行了修改,那么就会覆盖掉。

后续研究

关于提示框

使用alert?我费尽心思用上了bootstrap,你这里搞一个alert出来,简直就是往一盘美味里面吐唾沫。有没有美观一点的提示框?当然,答案是肯定的!

使用notifications插件来完成提示框的美化

先上个效果图:

jquery+ajaxform+springboot控件实现数据更新功能 

实现步骤

1.导入notifications所需js和css

<script src="static/assets/plugins/notifyjs/dist/notify.min.js"></script>
 <script src="static/assets/plugins/notifications/notify-metro.js"></script>
 <script src="static/assets/plugins/notifications/notifications.js"></script>
 <link href="static/assets/plugins/notifications/notification.css" rel="external nofollow" rel="stylesheet">

2.调用接口即可

$.Notification.notify('success','top center', '温馨提示', '保存成功!');

总结

以上所述是小编给大家介绍的jquery+ajaxform+springboot控件实现数据更新功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
Jquery-data的三种用法
Apr 18 jQuery
基于jQuery的表单填充实例
Aug 22 jQuery
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
jQuery Dom元素操作技巧
Feb 04 jQuery
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
jquery分页插件pagination使用教程
Oct 23 jQuery
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
JQuery表单元素取值赋值方法总结
May 12 jQuery
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 #jQuery
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 #jQuery
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 #jQuery
基于jquery的on和click的区别详解
Jan 15 #jQuery
vue-cli webpack 引入jquery的方法
Jan 10 #jQuery
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 #jQuery
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 #jQuery
You might like
利用yahoo汇率接口实现实时汇率转换示例 汇率转换器
2014/01/14 PHP
php获取网页中图片、DIV内容的简单方法
2014/06/19 PHP
php表单提交实例讲解
2015/11/12 PHP
PHP常用的小程序代码段
2015/11/14 PHP
PHP6连接SQLServer2005的三部曲
2016/04/15 PHP
php实现的后台表格分页功能示例
2017/10/23 PHP
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
2007/01/22 Javascript
javascript实现的listview效果
2007/04/28 Javascript
关于__defineGetter__ 和__defineSetter__的说明
2007/05/12 Javascript
JavaScript 学习笔记(十四) 正则表达式
2010/01/22 Javascript
JS小功能(列表页面隔行变色)简单实现
2013/11/28 Javascript
使用text方法获取Html元素文本信息示例
2014/09/01 Javascript
javascript使用avalon绑定实现checkbox全选
2015/05/06 Javascript
JS实现Fisheye效果动感放大菜单代码
2015/10/21 Javascript
jQuery插件Validate实现自定义校验结果样式
2016/01/18 Javascript
基于jquery实现三级下拉菜单
2016/05/10 Javascript
微信小程序加载更多 点击查看更多
2016/11/29 Javascript
Require.JS中的几种define定义方式示例
2017/06/01 Javascript
详解vue渲染函数render的使用
2017/12/12 Javascript
js中let和var定义变量的区别
2018/02/08 Javascript
vue 项目 iOS WKWebView 加载
2019/04/17 Javascript
解决Layui中templet中a的onclick参数传递的问题
2019/09/20 Javascript
JavaScript 常见的继承方式汇总
2020/09/17 Javascript
[47:52]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第二场 11.26
2020/11/30 DOTA
python开发中range()函数用法实例分析
2015/11/12 Python
Python做文本按行去重的实现方法
2016/10/19 Python
pandas带有重复索引操作方法
2018/06/08 Python
python跳出双层for循环的解决方法
2019/06/24 Python
导入tensorflow时报错:cannot import name 'abs'的解决
2019/10/10 Python
python 消除 futureWarning问题的解决
2019/12/25 Python
Python基于argparse与ConfigParser库进行入参解析与ini parser
2021/02/02 Python
澳大利亚最早和最古老的巨型游戏专家:Yardgames
2020/02/20 全球购物
linux系统都有哪些运行级别
2016/03/26 面试题
绿色环保口号
2014/06/12 职场文书
2014年团支部年度工作总结
2014/12/24 职场文书
Mac环境Nginx配置和访问本地静态资源的实现
2021/03/31 Servers