使用ajax调用自动保存表单数据

Autosaving form data using ajax calls

本文关键字：保存 表单 数据 ajax 调用 使用      更新时间：2023-09-26

我正在尝试使用ajax调用在服务器端自动保存表单数据。我在任何输入更改后20秒开始自动保存。如果有一个自动保存调用正在进行，我想等待。以下是我正在采取的步骤。我的方法依赖于javascript全局变量，我担心可能会遇到某种同步问题。还有其他更好的方法吗？

$('input').change(function() {
            if (autoSaveInProgress == false) {
                //call ajax function in 20secodns.
                setTimeout(autoSaveFunction, 20000);
                autoSaveInProgress = true;
            }
        });

收到服务器的响应后，我在autoSaveFunction中将autoSaveInProgress设置为false。

我建议使用（jQ）xhr对象属性：

var saveXhr;
function autoSave(){
    if(saveXhr && saveXhr.readyState < 4){ 
         //previous save not completed
         //do something, perhaps saveXhr.abort() or prolong the timer
    }else{
       saveXhr = $.ajax({ /* your save ajax code */ });
    }
}

为了避免使用全局范围的变量，可以在发生更改事件的元素上设置属性。我喜欢使用disabled属性。

var disabled = $that.attr('disabled');
if (disabled) {
    return false;
}
$(this).attr('disabled', 'disabled');

并重新启用该元素，但您必须将该元素传递到异步闭包中（参见fiddle）：

$that.removeAttr('disabled');

http://jsfiddle.net/EHFZL/

您还可以使更改选择器更加具体：http://jsfiddle.net/eHQbh/

相关文章：