SpringMVC：自动保存功能（jQuery、Ajax…）

我想在我的页面上实现自动保存功能。但我真的不知道如何开始。我得到了一个有任务列表的对象。我希望每20秒提交一次表单，这样用户就不会丢失数据。它不一定是那样的。每次提交后，只要没有更改，提交按钮应被禁用

我正在使用SpringMVC。我做了一些研究，但我不是jQuery方面的专家，Spring。。。所以这对我来说很复杂。一个提示，或者一个有效的例子会对我有很大帮助

这是一张非常复杂的时间表。一页上至少有+/-50个文本框，具体取决于可用任务的数量

---

谢谢。

我不知道什么是spring mvc，但在ASP.NET mvc中，我将执行以下操作：

我假设您的所有数据都在一个表单中，您给表单一个ID，然后发布：

$(function () {
   var timer = 0;
   $(this).mousemove(function(e){
     timer = 0;
   });
   $(this).keypress(function() {
     timer = 0;
   });
   window.setInterval(function () {
      timer++;
    if (timer == 20) {
      $('#form').submit(function() {

      });
     }
    }, 1000);

})

检查mousemove、keypress，如果20秒内未完成，则保存表单

编辑：您还可以做的是，在他们填写的每个文本框之后，发布数据：如下所示：

在本例中，您创建了一个名为Save的控制器，操作名为Textbox，您为Textbox提供了它必须保存的数据ID，在取消对Textbox的聚焦后进行更改时，它将发布Textbox ID和框的值

然后在控制器中检索它：

  public void SaveText(string TextBoxId, string TextValue) {
   // SAVE
    }

---

下面的Js脚本将帮助您在表单字段发生更改时进行ajax调用

<script>
  $(document).ready($('.form-control').change(function() {
   $.ajax({
    type : "post",
    url : "http://localhost:8521/SpringExamples/autosave/save.htm",
    cache : false,
    data : $('#employeeForm').serialize(),
    success : function(response) {
     var obj = JSON.parse(response);
     $("#alert").text(JSON.stringify(obj));
     $("#alert").addClass("alert-success");
    },
    error : function() {
     alert('Error while request..');
    }
   });
  }));
 </script>

---

那很好。但是当用户仍在填写表单时会发生什么？我想加一些支票来处理这件事。有没有关于表单加载时自动禁用的想法？顺便说一句，非常感谢。

<script>
  $(document).ready($('.form-control').change(function() {
   $.ajax({
    type : "post",
    url : "http://localhost:8521/SpringExamples/autosave/save.htm",
    cache : false,
    data : $('#employeeForm').serialize(),
    success : function(response) {
     var obj = JSON.parse(response);
     $("#alert").text(JSON.stringify(obj));
     $("#alert").addClass("alert-success");
    },
    error : function() {
     alert('Error while request..');
    }
   });
  }));
 </script>