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

$.ajax({
 type: 'POST',
 url: url,
 data: data,
 success: success,
 dataType: dataType
});

<script src="/UploadFiles/2021-04-02/jquery.form.min.js">

该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插件来完成提示框的美化
先上个效果图：
 
实现步骤
1.导入notifications所需js和css




<script src="/UploadFiles/2021-04-02/notify.min.js">

2.调用接口即可


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


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