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获取table下某一行某一列的值实现代码
Apr 07 jQuery
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
jquery append与appendTo方法比较
May 24 jQuery
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
jquery实现动态添加附件功能
Oct 23 jQuery
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
jquery自定义组件实例详解
Dec 31 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 常用类整理
2009/12/23 PHP
php 广告调用类代码(支持Flash调用)
2011/08/11 PHP
解析PHP处理换行符的问题 \r\n
2013/06/13 PHP
编写PHP脚本来实现WordPress中评论分页的功能
2015/12/10 PHP
必须收藏的php实用代码片段
2016/02/02 PHP
php获取开始与结束日期之间所有日期的方法
2016/11/29 PHP
PHP队列场景以及实现代码实例详解
2021/02/26 PHP
javascript 获取HTML DOM父、子、临近节点
2014/06/16 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
2016/05/18 Javascript
javascript日期比较方法实例分析
2016/06/17 Javascript
jQuery 特性操作详解及实例代码
2016/09/29 Javascript
JavaScript字符集编码与解码详谈
2017/02/02 Javascript
Angular.js中下拉框实现渲染html的方法
2017/06/18 Javascript
Vue中v-for的数据分组实例
2018/03/07 Javascript
在Vue中获取自定义属性方法:data-id的实例
2020/09/09 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
2021/01/18 Javascript
Python监控主机是否存活并以邮件报警
2015/09/22 Python
Python中的time模块与datetime模块用法总结
2016/06/30 Python
python生成以及打开json、csv和txt文件的实例
2018/11/16 Python
pyside+pyqt实现鼠标右键菜单功能
2020/12/08 Python
Python3实现的简单三级菜单功能示例
2019/03/12 Python
python 变量初始化空列表的例子
2019/11/28 Python
浅谈pytorch torch.backends.cudnn设置作用
2020/02/20 Python
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
2014/11/05 HTML / CSS
使用HTML和CSS实现的标签云效果(附demo)
2021/02/03 HTML / CSS
Bally巴利中国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/10/09 全球购物
Sandro法国官网:法国成衣品牌
2019/08/28 全球购物
预备党员党校学习自我评价分享
2013/11/12 职场文书
平民服装店创业计划书
2014/01/17 职场文书
十佳美德少年事迹材料
2014/02/05 职场文书
业务员的岗位职责
2014/03/15 职场文书
高中语文教学反思范文
2016/02/16 职场文书
新员工入职感言范文!
2019/07/04 职场文书
Python趣味挑战之实现简易版音乐播放器
2021/05/28 Python
MySQL Shell import_table数据导入的实现
2021/08/07 MySQL
Redis的字符串是如何实现的
2021/10/24 Redis