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实现 RadioButton做必选校验功能
Jun 15 jQuery
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 jQuery
Jquery异步上传文件代码实例
Nov 13 jQuery
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 jQuery
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 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数组函数序列之array_values() 获取数组元素值的函数与方法
2011/10/30 PHP
php实现简单爬虫的开发
2016/03/28 PHP
php调用自己java程序的方法详解
2016/05/13 PHP
php获取指定数量随机字符串的方法
2017/02/06 PHP
PHP实现负载均衡下的session共用功能
2018/04/17 PHP
javascript错误的认识不用关心内存管理
2012/12/15 Javascript
关于jQuery新的事件绑定机制on()的使用技巧
2013/04/26 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
2014/03/26 Javascript
你可能不知道的JavaScript的new Function()方法
2014/04/17 Javascript
node.js中使用socket.io制作命名空间
2014/12/15 Javascript
javascript 实现 原路返回
2015/01/21 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
2015/08/25 Javascript
漫谈JS引擎的运行机制 你应该知道什么
2016/06/15 Javascript
谈谈第三方App接入微信登录 解读
2016/12/27 Javascript
JS实现的数字格式化功能示例
2017/02/10 Javascript
整理关于Bootstrap列表组的慕课笔记
2017/03/29 Javascript
node中koa中间件机制详解
2017/08/22 Javascript
解决vue-router进行build无法正常显示路由页面的问题
2018/03/06 Javascript
python模拟登录并且保持cookie的方法详解
2017/04/04 Python
python实现输入数字的连续加减方法
2018/06/22 Python
python实现自动登录
2018/09/17 Python
使用python绘制3维正态分布图的方法
2018/12/29 Python
django框架使用方法详解
2019/07/18 Python
python被修饰的函数消失问题解决(基于wraps函数)
2019/11/04 Python
Python threading.local代码实例及原理解析
2020/03/16 Python
Node.js 和 Python之间该选择哪个?
2020/08/05 Python
Python 操作 MySQL数据库
2020/09/18 Python
Python 如何实现数据库表结构同步
2020/09/29 Python
普天C++笔试题
2016/03/20 面试题
家长会学生家长演讲稿
2013/12/29 职场文书
关于环保的建议书
2014/05/12 职场文书
教师节主题班会教案
2015/08/17 职场文书
ztree+ajax实现文件树下载功能
2021/05/18 Javascript
浅析Python实现DFA算法
2021/06/26 Python
一文了解MySQL二级索引的查询过程
2022/02/24 MySQL
教你在 Java 中实现 Dijkstra 最短路算法的方法
2022/04/08 Java/Android