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

 更新时间:2018年01月22日 11:43:01   作者:OnyWang  
这篇文章主要介绍了jquery+ajaxform+springboot控件实现数据更新操作,使用jquery的ajaxform插件是一个比较不错的选择。具体实现工程大家参考下本文

GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
如果你想靠AI翻身,你先需要一个靠谱的工具!

应用背景

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

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

 

改造历程

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

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

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

1
2
3
4
5
6
7
$.ajax({
 type: 'POST',
 url: url,
 data: data,
 success: success,
 dataType: dataType
});

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

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

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

实现过程

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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);
   }

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

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

后台实现代码

1
2
3
4
5
6
7
8
9
10
11
@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插件来完成提示框的美化

先上个效果图:

 

实现步骤

1.导入notifications所需js和css

1
2
3
4
<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.调用接口即可

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

总结

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

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:https://www.jianshu.com/p/aff068e4db02

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

  • 使用jquery操作session方法分享

    使用jquery操作session方法分享

    本文给大家分享了一个jQuery操作session的插件jQuerysession,并做了简单介绍,及基本语法,非常不错的一个插件,推荐给小伙伴们。
    2015-01-01
  • jQuery之end()和pushStack()使用介绍

    jQuery之end()和pushStack()使用介绍

    pushStack()方法在jQuery的DOM操作中被频繁的使用, 如在parent(), find(), filter()中, 当然还有其他许多类似的方法, 它们往往需要返回一个jQuery封装过的DOM结果集
    2012-02-02
  • jQuery实现网页抖动的菜单抖动效果

    jQuery实现网页抖动的菜单抖动效果

    这篇文章主要介绍了jQuery实现网页抖动的菜单抖动效果,鼠标滑过菜单项可见到菜单项的抖动效果,涉及jquery鼠标事件及页面元素样式动态操作的技巧,需要的朋友可以参考下
    2015-08-08
  • jQuery提交表单ajax查询实例代码

    jQuery提交表单ajax查询实例代码

    用户输入一个表单,输入准考证和验证码,验证用户是否输入表单,点击查询提交,然后从服务器得到返回的数据并显示出来
    2012-10-10
  • jQuery实现回车键(Enter)切换文本框焦点的代码实例

    jQuery实现回车键(Enter)切换文本框焦点的代码实例

    这篇文章主要介绍了jQuery实现回车键(Enter)切换文本框焦点的代码实例,需要的朋友可以参考下
    2014-05-05
  • jquery插件实现扫雷游戏(2)

    jquery插件实现扫雷游戏(2)

    这篇文章主要为大家详细介绍了jquery插件实现扫雷游戏第二篇,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04
  • jquery实现的动态回到顶部特效代码

    jquery实现的动态回到顶部特效代码

    这篇文章主要介绍了jquery实现的动态回到顶部特效代码,涉及jQuery基于时间函数的定时递归调用实现带缓冲效果的移动功能,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • jQuery实用函数用法总结

    jQuery实用函数用法总结

    这篇文章主要介绍了jQuery实用函数用法总结,汇总了jQuery常用的函数及相关技巧,需要的朋友可以参考下
    2014-08-08
  • 基于jquery的热点内容轮换效果

    基于jquery的热点内容轮换效果

    jquery轮换效果网上已经很多了,不过这个效果挺有特色的。需要的朋友可以看下。
    2011-07-07
  • BootStrap无限级分类(无限极分类封装版)

    BootStrap无限级分类(无限极分类封装版)

    本文给大家介绍bootstrap无限级分类jq拓展之前的无限级分类的封装版的知识,非常不错具有参考借鉴价值,感兴趣的朋友一起看下吧
    2016-08-08

最新评论