Spring MVC：自动保存功能（jQuery、Ajax...）答案

【问题标题】：Spring MVC: Auto-save functionality (jQuery, Ajax...)Spring MVC：自动保存功能（jQuery、Ajax...）
【发布时间】：2017-09-26 16:56:00
【问题描述】：

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

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

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

谢谢。

【问题讨论】：

标签： spring jquery spring-mvc autosave

【解决方案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
    }

【讨论】：

效果很好。但是当用户仍在填写表单时会发生什么？我想添加一些“检查”来解决这个问题。关于表单加载时自动禁用的任何想法？非常感谢。

【解决方案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>

【讨论】：