使用 jquery 和 ajax 自动保存表单字段输入

Posted 2023-05-09

【中文标题】使用 jquery 和 ajax 自动保存表单字段输入

【英文标题】：Auto save form field inputs using jquery and ajax

【发布时间】：2015-06-19 16:49:59

【问题描述】：

我有一个表单，有不同的输入字段。所以非常分钟，用户输入的数据需要自动存储在数据库中。提交请求后，它将被定向到将执行数据库交互的 struts 文件。

我已经尝试过，我已经设置了每次加载页面时运行的超时功能

var timer;
$(document).ready(function() 
timer = setTimeout("autosave()", 60000); 
);

在自动保存功能中，我正在尝试将输入数据发布到指定的 URL

jQuery('form').each(function() 
        jQuery.ajax(
            url: "http://localhost:7002/submitStudent.do?requestType=auto&autosave=true",
            data: jQuery(this).serialize(),
            type: 'POST',
            success: function(data)
                if(data && data == 'success') 
                    alert("data saved");
                else
                
            
        ); 
    ); 

 

并且一旦请求发送到struts，就会根据requesttype进行处理并提交数据。

但在我的情况下，数据没有被保存。

请分享您对我做错了什么以及任何其他方法的建议？

感谢您宝贵的建议和时间..

仅供参考，我是 Jquery 和 ajax 技术的初学者

JSFIDDLE：jsfiddle

【问题讨论】：

数据是否保存在您的数据库中？

requestType="auto" 写这个不带双引号..

setTimeout 不会每分钟都打电话。

this fiddle 之类的东西应该可以满足要求。 6 秒而不是 60 秒用于测试。

@GuruprasadRao 已修改。谢谢

【参考方案1】：

我根据你的要求做了一个fiddle。

var timer;

var fun = function autosave() 
    alert();
    jQuery('form').each(function () 
        jQuery.ajax(
            url: "http://localhost:7002/submitStudent.do?autosave=true",
            data: jQuery(this).serialize(),
            type: 'POST',
            success: function (data) 
                if (data && data == 'success') 
                    alert("data saved");
                 else 
            
        );
    );

$(document).ready(function () 
    setTimeout(fun, 1000);
    //setInterval(fun,1000);
);

您需要关注setTimeout 和setInterval 两种方法。 setTimeout 将在 DOM 加载 1 秒后调用 autosave()，但只会调用一次。 setInterval 将在每 1 秒后重复调用 autosave()。你可以阅读它here。

setTimeout() 方法调用函数或计算表达式 在指定的毫秒数之后。 提示：该函数只执行一次。如果需要重复执行，请使用setInterval() 方法。

有关您的 ajax 请求的更多详细信息，您需要查看控制台（F12）错误。

【讨论】：

这种方法只适用于在短时间内触发的 ajax 调用不多的场景。例如，当并行运行自动 UI 测试时，这将不起作用.. 也更好地使用 debounce 而不是 setTimeout。

【参考方案2】：

我推荐你使用ajaxForm插件

并在自动保存功能中触发 $('form').submit();

这个方法又快又好

【讨论】：

那么，与其指出setTimeout 运行一次，setInterval 更适合那里，您只是建议表单提交插件？

@Moayad AL-Najdawi ，感谢您的回复。但我打算在没有插件的情况下这样做

我假设您将在其中再次调用自动保存功能，然后您将每 6 秒触发一次自动保存

@jegadees 哦，对不起，我在你的标签中看到 jquery-plugins 所以我放了一个插件来帮助你