Question

如何在后台实现表单的定期保存？和gmail一样的事情。

Answer 1

setInterval(function(){
  var form = $('#my-form-id');
  var method = form.attr('method').toLowerCase();      // "get" or "post"
  var action = form.attr('action');                    // url to submit to
  $[method](action, form.serialize(), function(data){
    // Do something with the server response data      
    // Or at least let the user know it saved
  });
},10000);                                              // do it every 10 seconds

如果您不想使用表单的方法，但总想使用'post'，那么请使用：

$.post(action, form.serialize(), ... );

并且，如果您想为自动保存提供与实际保存操作不同的操作：

$.post("/autosave/comments", form.serialize(), ... );

Answer 2

您需要在客户端进行定时循环，以便每隔x秒/分钟保存一次表单。这样做的一种粗略方法是使用setTimeout javascript函数来收集表单的字段值，并通过更新（Rails'中的PUT）AJAX请求来更新模型。

示例

这是一种粗暴的做法（即可能有更好的方法）：

// repeat every 10 seconds var repeatTime = 10 * 1000; function updateModel(){ // get field values (using jQuery, etc.) // make ajax request using these field values //(make sure put parameters match model attribute names) console.log('updated'); setTimeout(updateModel, repeatTime); // start call over again } setTimeout(updateModel, repeatTime);

我添加了console.log，以便您可以立即在Firebug中测试它，并看到updateModel每10秒执行一次。我建议使用jQuery生成PUT AJAX请求。

Answer 3

为什么不使用本地数据库（或其他）纯粹在客户端上执行此操作？这应该可以降低复杂性，服务器负载和带宽使用率。

永久或每会话存储 - 任何合适的 - 并且您可以在每次击键后保存：不需要setTimeout（）。

Answer 4

Sisyphus.js：类似Gmail的客户端草稿和更多内容。插件开发用于将html表单数据保存到LocalStorage，以便在浏览器崩溃，标签关闭和其他灾难后恢复它们。 http://sisyphus-js.herokuapp.com

Smashing Magazine文章：http://coding.smashingmagazine.com/2011/12/05/sisyphus-js-client-side-drafts-and-more/

Answer 5

无需jquery即可运行的版本：

function urlencodeFormData(fd) {
    var s = '';
    function encode(s) { return encodeURIComponent(s).replace(/%20/g,'+'); }
    for (var pair of fd.entries()) {
        if(typeof pair[1]=='string') {
            s += (s?'&':'') + encode(pair[0])+'='+encode(pair[1]);
        }
    }
    return s;
}

setInterval(function() {
    var form = document.getElementById('my-form-id');
    var request = new XMLHttpRequest();
    request.open(form.method, form.action);
    request.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
    request.send(urlencodeFormData(new FormData(form)));
}, 10000);

如果您需要对服务器响应进行某些操作，请参见以下帖子：https://blog.garstasio.com/you-dont-need-jquery/ajax/#posting

定期自动保存表格

5 个答案: