当前位置：文江博客话题详情

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

发布于 2024-10-29 21:35:30 字数 304 浏览 0 评论 0原文

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

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

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

谢谢。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

南冥有猫 2024-11-05 21:35:30

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

I don't know what spring mvc is, but in ASP.NET MVC I would do the following:

I assume all your data is in a form, you give the form an ID, then post it:

$(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);

});

Checks for mousemove, keypress, if this isnt done in 20 seconds then it saves the form.

Edit: What you could also do maybe is, after every textbox they fill in, post the data: as followed:

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

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

In this example, you make a controller called Save, action called Textbox, you give the textbox the ID of data that it has to save, and on change (after un focussing the textbox), it posts the textbox id, and the value of the box.

then in the controller you retrieve it:

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

回复收藏 0 原文

夜夜流光相皎洁 2024-11-05 21:35:30

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

Below Js script will help you to make ajax call when ever form field changes.

<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>

回复收藏 0 原文

~没有更多了~