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 ajax请求struts action实现异步刷新
Apr 19 jQuery
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
jQuery事件对象的属性和方法详解
Sep 09 jQuery
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
jQuery实现开关灯效果
Aug 02 jQuery
jquery实现抽奖功能
Oct 22 jQuery
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 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
PHP中数组合并的两种方法及区别介绍
2012/09/14 PHP
YII Framework框架教程之使用YIIC快速创建YII应用详解
2016/03/15 PHP
解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
2019/10/03 PHP
网页禁用右键实现代码(JavaScript代码)
2009/10/29 Javascript
JavaScript window.setTimeout() 的详细用法
2009/11/04 Javascript
容易被忽略的JS脚本特性
2011/09/13 Javascript
动态载入js提高网页打开速度的方法
2014/07/04 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
2014/11/28 Javascript
jQuery构造函数init参数分析续
2015/05/13 Javascript
javascript瀑布流式图片懒加载实例
2020/06/28 Javascript
详解微信小程序 页面跳转 传递参数
2016/12/08 Javascript
JS轮播图中缓动函数的封装
2020/11/25 Javascript
JavaScript纯色二维码变成彩色二维码
2020/07/23 Javascript
Angular.JS中的this指向详解
2017/05/17 Javascript
深入理解Vue 的条件渲染和列表渲染
2017/09/01 Javascript
jQuery实现的滑块滑动导航效果示例
2018/06/04 jQuery
vue中的router-view组件的使用教程
2018/10/23 Javascript
详解express使用vue-router的history踩坑
2019/06/05 Javascript
150行Node.js实现的dns代理工具
2019/08/02 Javascript
vue.config.js中配置Vue的路径别名的方法
2020/02/11 Javascript
使用Python脚本将文字转换为图片的实例分享
2015/08/29 Python
pandas DataFrame 删除重复的行的实现方法
2019/01/29 Python
python+mysql实现个人论文管理系统
2019/10/25 Python
Selenium Webdriver元素定位的八种常用方式(小结)
2021/01/13 Python
CSS3 3D旋转rotate效果实例介绍
2016/05/03 HTML / CSS
英国时尚泳装品牌:Maru Swimwear
2019/10/06 全球购物
新东方旗下远程教育网站:新东方在线
2020/03/19 全球购物
JAVA软件工程师测试题
2014/07/25 面试题
出纳岗位职责
2013/11/09 职场文书
出纳试用期自我鉴定
2014/04/07 职场文书
金融系应届毕业生求职信
2014/05/26 职场文书
庆祝三八妇女节标语
2014/10/09 职场文书
产品质量保证书范本
2015/02/27 职场文书
人事行政助理岗位职责
2015/04/11 职场文书
人力资源部工作计划
2019/05/14 职场文书
Nginx代理同域名前后端分离项目的完整步骤
2021/03/31 Servers