应用背景

使用springboot架构保存或更新界面布局中的数据，如下图所示，必须提交到后台。如何提示成功或失败？如果使用传统的springmvc模式，需要向前端发送一个页面，这个页面只是提示操作是否成功！提示后还要更新数据，就像我们在浏览一些网站时，给出一些操作成功的提示，5秒后返回。

很蠢，客户体验差。

转型过程

ajax能解决以上问题吗？

答案是肯定的。单击保存后，一个ajax请求将被发送到后台，ResponseBody标记将用于限制返回的数据。然后根据返回的数据给出相应的提示信息。

传统的ajax请求数据，这需要重新组织表单中的数据，并将其全部放入我们的请求主体中。如以下代码所示：

$.ajax({ type: 'POST '，url: url，data:数据，success: success，dataType : dataType })；如果我提交更多的表单数据，那么数据是比较庞大的。代码臃肿。同时，形式也失去了意义。

有没有一种优雅的方法来实现表单的ajax提交？当然可以。

Jquery的ajaxform插件是一个不错的选择。

实施程序

第一步。当然，我们已经介绍了我们强大的插件。

脚本src=' http : static/assets/js/jquery . form . min . js '/脚本这个js下载，让我提供github的地址：https://github.com/jquery-form/form.

第二步。将ajax表单请求发送到我们想要发送请求的地方。

函数insert(){ var options={//target : ' # output1 '，//用服务器返回的数据更新id为output 1的内容。//beforeSubmit: showRequest，//success: showresponse在提交之前，//提交之后，//其他属性：//URL 3360 URL//默认为表单的操作，这将覆盖来自的操作。//type : type//默认为窗体的方法。如果写入，它将重写from方法。(“获取”或“发布”)。//datatype : null//“XML”、“脚本”或“JSON”(接受服务器返回的类型。)//clearform 3360 rue//成功提交后，清除所有表单元素的值。resetForm: false //成功提交后，重置所有表单元素的值。//由于某种原因，提交处于无限等待状态，超时参数用于限制请求的时间。//当请求长于3秒时，跳出请求。//time out : 3000 }；//“AJax FORm”表单。$ ('# baseform ')。ajaxsubmit(选项)；}处理提交后返回的方法

//函数show response (responsetext，statustext){ alert(' status : ' statustext ' n返回的内容是： n ' response text ')；}后台实现代码

@ request mapping('/basis save ')@ response body public String basis save(PointInfo pi){ if(！pi.getSaddress()。equals(“”){ pi . SetType(“^ 1”)；} else { pi . SetType(' 0 ')；} int newId=PointInfoServiCe . saveorupdate(pi)；返回新标识“”；}逻辑定义了自己

注意

提交时，必须使用ajaxSubmit方法提交的动作。默认情况下，如果参数被修改，表单中的请求方法(post或get)、dataType(json、xml)和其他数据将被覆盖。后续研究

关于提示框

使用警报？我已经尽力使用自举。如果你在这里得到一个警告，那只是在美味的菜肴上吐痰。有没有漂亮的提示框？当然，答案是肯定的！

使用通知插件美化提示框

首先转到上一个渲染：

实施步骤

1.导入通知所需的js和css

脚本src=' http : static/assets/plugins/notifyjs/dist/notify。量滴js /脚本脚本src=' http : static/assets/plugins/notify-metro。js /脚本脚本src=' http : static/assets/plugins/notify。js /脚本链接href=' static/assets/plugins/notify。CSS“rel=”外部no跟随“rel=”样式表' 2。调用接口即可

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

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