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

Auto save form field inputs using jquery and ajax

提问by jaggs

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 .

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

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

And in the autosave function , i am trying to post the input data to the designated URL

在自动保存功能中，我试图将输入数据发布到指定的 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{
                }
            }
        }); 
    }); 
}
 }

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

并且一旦请求被发送到 struts ，它将根据请求类型进行处理并提交数据。

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..

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

FYI , i am a beginner in Jquery and ajax technologies

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

JSFIDDLE : jsfiddle

JSFIDDLE : jsfiddle

回答by Sukanya1991

I have made a fiddleaccording 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);
});

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

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

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.

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

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

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

回答by Moayad AL-Najdawi

I recommend that you use ajaxFormplugin

我推荐你使用ajaxForm插件

and in the autosave function just fire $('form').submit();

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

this is the fast and good way

这是快速而好的方法