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插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
jQuery+pjax简单示例汇总
Apr 21 jQuery
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
jQuery实现键盘回车搜索功能
Jul 25 jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
jquery写出PC端轮播图实例
Jan 26 jQuery
jquery.pagination.js分页使用教程
Oct 23 jQuery
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
jQuery实现手风琴特效
Jan 11 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
如何跨站抓取别的站点的页面的补充
2006/10/09 PHP
php根据分类合并数组的方法实例详解
2013/11/06 PHP
PHP错误提示It is not safe to rely on the system……的解决方法
2019/03/25 PHP
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
2013/06/04 Javascript
js单例模式的两种方案
2013/10/22 Javascript
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
2013/12/18 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
2013/12/27 Javascript
Javascript实现禁止输入中文或英文的例子
2014/12/09 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
2015/06/05 Javascript
HTML页面定时跳转方法解析(2种任选)
2016/12/22 Javascript
js中document.referrer实现移动端返回上一页
2017/02/22 Javascript
angular学习之从零搭建一个angular4.0项目
2017/07/10 Javascript
vue-router 导航钩子的具体使用方法
2017/08/31 Javascript
解决node修改后需频繁手动重启的问题
2018/05/13 Javascript
在vue中给列表中的奇数行添加class的实现方法
2018/09/05 Javascript
全面了解JavaScript的作用域链
2019/04/03 Javascript
微信小程序聊天功能的示例代码
2020/01/13 Javascript
ant design vue 表格table 默认勾选几项的操作
2020/10/31 Javascript
[43:57]LGD vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
CentOS中使用virtualenv搭建python3环境
2015/06/08 Python
简介二分查找算法与相关的Python实现示例
2015/08/26 Python
Python将图片转换为字符画的方法
2020/06/16 Python
python DataFrame获取行数、列数、索引及第几行第几列的值方法
2018/04/08 Python
python集合是否可变总结
2019/06/20 Python
PyQt5基本控件使用之消息弹出、用户输入、文件对话框的使用方法
2019/08/06 Python
Python函数基本使用原理详解
2020/03/19 Python
Europcar比利时:租车
2019/08/26 全球购物
世界各地的旅游、观光和活动:Isango!
2019/10/29 全球购物
学习十八大报告感言
2014/02/28 职场文书
最新结婚典礼主持词
2014/03/14 职场文书
初中同学会活动方案
2014/08/22 职场文书
2014年大学教师工作总结
2014/12/02 职场文书
财务出纳岗位职责
2015/03/31 职场文书
入党积极分子培养人意见
2015/06/02 职场文书
高效笔记技巧分享:学会这些让你不再困扰
2019/09/04 职场文书
Python机器学习应用之工业蒸汽数据分析篇详解
2022/01/18 Python