spring - Spring MVC：自动保存功能（jQuery、Ajax...）

Question

我想在我的页面上实现“自动保存”功能。我真的不知道如何开始。我得到了一个对象（带有任务列表）。我想每 20 秒提交一次表单，这样用户就不会丢失他们的数据。它不必完全一样。每次提交后，只要没有更改，就应该禁用提交按钮。

我正在使用 Spring MVC。我做了一些研究，但我不是 jQuery、Spring 方面的专家……所以对我来说这一切都很复杂。一个提示或一个工作示例会对我有很大帮助。

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

谢谢。

Answer 1

我不知道 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);

});

检查鼠标移动，按键，如果这不是在 20 秒内完成，那么它会保存表单。

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

http://api.jquery.com/change/

$('.textbox').change(function() {
            $.ajax({
                url: '/Save/Textbox',
                data: 'TextBoxId=' + $(this).id + '&TextValue=' + $(this).value
            });
});

在此示例中，您创建了一个名为 Save 的控制器，一个名为 Textbox 的操作，您为文本框提供了它必须保存的数据的 ID，并且在更改时（取消聚焦文本框后），它发布文本框 ID，以及盒子。

然后在控制器中检索它：

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

Answer 2

下面的 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>