Javascript 定期自动保存表单

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

客户端需要一个定时循环，每隔x秒/分钟保存一次表单。一种简单的方法是使用

setTimeout

javascript函数，该函数收集表单的字段值，并通过一个更新（以Rails为例）AJAX请求更新模型

示例

下面是一个粗略的方法（即可能有更好的方法）：

我包括了

console.log

，这样您现在就可以在Firebug中测试它，并看到

updateModel

每10秒执行一次。我建议使用jQuery生成

PUT

AJAX请求。

setInterval（函数（）{
var form=$（“#我的表单id”）；
var method=form.attr（'method'）.toLowerCase（）；/“get”或“post”
var action=form.attr（'action'）；//要提交到的url
$[method]（操作，form.serialize（），函数（数据）{
//对服务器响应数据执行一些操作
//或者至少让用户知道它已保存
});
},10000);                                              // 每10秒做一次

如果您不想使用表单的方法，但始终想使用“post”，请使用：

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

并且，如果要为自动保存提供与实际保存不同的操作，请执行以下操作：

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

---

为什么不使用本地数据库（或其他什么）在客户机上执行此操作？这将降低复杂性、服务器负载和带宽使用

---

永久存储或每会话存储--无论什么合适--每次击键后都可以保存：不需要setTimeout（）。

Sisyphus.js:类似Gmail的客户端草稿等。该插件用于将html表单数据保存到LocalStorage，以便在浏览器崩溃、选项卡关闭和其他灾难后恢复这些数据。

---

扣人心弦的杂志文章：

不使用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);

---

如果您需要处理服务器响应，请参阅以下帖子：

@flOOr是的，定期提交ajax请求。@flOOr您能提供一些示例吗？在这样的情况下，人们喜欢当您编写一些不起作用的代码，然后大家都开始修复它：）这也不是关于Ruby或Ruby-On的Rails@krunal-我用一个例子更新了我的答案。这对你有用吗？你能提供一些例子吗？为什么不使用setInterval（）而不是setTimeout（）？-@Phrogz，你能在你的第一个代码块中解释一下表单验证将走向何方吗？@Timperson 3.5年后才做出回应，但是：我假设你在谈论客户端验证，如果表单无效，你不想提交表单？如果是的话，那就是代码，对吗<代码>if（formIsValid（form））$[method]（…）

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