33

我的网站上有一个大表格，我希望能够在用户填写时自动保存到数据库中。几乎与输入文档时谷歌驱动器的工作方式相同。

我试图不要有一个每 X 秒运行一次的函数，而是一个在用户输入中断时运行的函数。因此，如果用户在 1 小时内未输入但仍在页面上，则不会继续推送保存请求。

到目前为止，这就是我所拥有的所有内容，这是一个基本的 javascript 表单提交。

$("#page1Form").submit(function(event){
  event.preventDefault();  
  $changesSaved.text("Saving...");
  var url = "/backend/forms/page1-POST.php";
        $.ajax({
         type: "POST",
         url: url,
         data: $("#page1Form").serialize(),
         success: function(data) { $changesSaved.text(data); }
        });
  return false;
  });
4

3 回答 3

63

Debounce the textarea change.

Demo: jsFiddle

Put your ajax call in the saveToDB() function. These event names('input propertychange change') will trigger on any form element change such as radio buttons, inputs, etc.

var timeoutId;
$('#the-textarea').on('input propertychange change', function() {
    console.log('Textarea Change');

    clearTimeout(timeoutId);
    timeoutId = setTimeout(function() {
        // Runs 1 second (1000 ms) after the last change    
        saveToDB();
    }, 1000);
});

function saveToDB()
{
    console.log('Saving to the db');    
}

Here is a full demo showing you how to debounce a full form and use ajax to send the data and then return the status (Saving, Saved, etc).

Demo full form and ajax: jsFiddle

于 2013-11-11T16:31:44.183 回答
7

我知道这个问题很老，但我想包括一个我最喜欢的代码。我在这里找到它：http: //codetunnel.io/how-to-implement-autosave-in-your-web-app/

这是代码：

var $status = $('#status'),
    $commentBox = $('#commentBox'),
    timeoutId;

$commentBox.keypress(function () {
    $status.attr('class', 'pending').text('changes pending');

    // If a timer was already started, clear it.
    if (timeoutId) clearTimeout(timeoutId);

    // Set timer that will save comment when it fires.
    timeoutId = setTimeout(function () {
        // Make ajax call to save data.
        $status.attr('class', 'saved').text('changes saved');
    }, 750);
});

它会在用户停止写入超过 750 毫秒后保存。

它还有一个状态，让用户知道更改是否已保存。

于 2016-05-05T17:49:26.203 回答
1

试试 Sisyphus.js https://github.com/simsalabim/sisyphus。它将表单数据持久保存在浏览器的本地存储中，并且对关闭标签页、浏览器崩溃等具有鲁棒性...

于 2014-08-17T15:14:47.173 回答