使用jquery和ajax自动保存表单字段输入 [英] Auto save form field inputs using jquery and ajax

问题描述

我有一个带有不同输入字段的表单.因此，在很短的时间内，用户输入的数据需要自动存储在数据库中.提交请求后，会将其定向到将在其中进行数据库交互的struts文件.

I have a form with different input fields.So for very minute , the data entered by the user needs to be automatically stored in the database. Once the request is submitted , it will be directed to the struts file where the database interactions will be carried out .

我尝试过的操作，是将超时功能设置为每次加载页面时都运行

What i have tried, I had set the timeout function to run every time the page is loaded

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

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

And in the autosave function , i am trying to post the input data to the designated 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后，将根据请求类型进行处理，并提交数据.

And once the request is sent to the struts , it will be processed based on the requesttype and the data will be submitted.

但是在我的情况下，数据无法保存.

But in my case , data doesn't get saved.

请就我做错了什么以及其他任何解决方法分享您的建议?

Kindly share your suggestions on what i am doing wrong and any other ways to do it ?

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

Thanks for your valuable suggestion and time..

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

FYI , i am a beginner in Jquery and ajax technologies

JSFIDDLE: jsfiddle

JSFIDDLE : jsfiddle

推荐答案

我制作了小提琴根据您的要求.

I have made a fiddle according to your requirement.

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().您可以在此处阅读.

You need to focus on two methods setTimeout and setInterval. setTimeout will call autosave() after 1 second of DOM loading but only once. setInterval will call autosave() after every 1 second repeatedly. You can read it here.

setTimeout()方法调用一个函数或计算一个表达式 在指定的毫秒数后. 提示:该功能仅执行一次.如果需要重复执行，请使用setInterval()方法.

The setTimeout() method calls a function or evaluates an expression after a specified number of milliseconds. Tip: The function is only executed once. If you need to repeat execution, use the setInterval() method.

有关ajax请求的更多详细信息，您需要查看console(F12)错误.

For more details on your ajax request you need to look at the console(F12) errors.

这篇关于使用jquery和ajax自动保存表单字段输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！