Question

我有这个代码，我试图每5秒保存一次数据，只有表格中有数据。但是当页面加载时，在5秒的间隔后会出现“Form Saved”消息。并且在此之后不会出现数据是否以表格形式存在

    $(document).ready(function () {
        $(":input").each(function() {
            if($(this).val() !== "") 
                window.setInterval(saveData, 5000);
        }); 
    });

    function saveData(){
       $.ajax({
           type: 'POST',
           url: "SaveDraft.aspx",
           data: {
               name: $('#frmTaxSheet').serialize()
           },
           cache: false,
           error: function(xhr, status, errorThrown) {
               alert(errorThrown + '\n' + status + '\n' + xhr.statusText);
           },
           success: function(response) {
                $('#notify').text("Form Data Saved").fadeOut(2000, function() { 
                    $(this).remove();
                });
            ;}
       });
    }

我该如何解决这个问题？

Answer 1

试试这个：

$(document).ready(function () {
    window.setTimeout(saveDraft, 5000);
});

function saveData(){
    var askAjax = true;
    $(":input").each(function() {
        if($(this).val() === "") { askAjax &= false; }
    });

    if(askAjax) {
        $.ajax({
            type: 'POST',
            url: "SaveDraft.aspx",
            data: {
                name: $('#frmTaxSheet').serialize()
            },
            cache: false,
            error: function(xhr, status, errorThrown) {
                alert(errorThrown + '\n' + status + '\n' + xhr.statusText);
            },
            success: function(response) {
                window.setTimeout(saveDraft, 5000);
                $('#notify').text("Form Data Saved").fadeIn(2000, function() {
                    $('#notify').delay('1000').fadeOut(500);
                });
            }
        });
    } else {
        window.setTimeout(saveDraft, 5000);
    }
}

Answer 2

尝试修改此部分：

success: function(response) {
            $('#notify').text("Form Data Saved")
                        .css('opacity', '0.5')
                        .animate({'opacity':'1'}, 'slow')
                        .animate({'opacity':'0'}, 'slow');
            });

因为在：

$('#notify').text("Form Data Saved").fadeOut(2000, function() { 
                $(this).remove();

您已删除了身份#notify，而第二个interval request已删除身体

Answer 3

绑定到按键事件怎么样？

$(document).ready(function () {
   $("form").on('keypress', function() {
     window.setTimeout(function(){
       saveData();
      }, 5000);
   });
});

Answer 4

我担心你的代码有一些很大的错误，你应该尝试这样的事情：）

注意：如果您使用：input而不是：text，请确保您没有任何会导致代码中断的隐藏字段。

note2：检查val（）！=“”是否会使ajax发布，即使自上一篇文章以来没有任何变化，因此检测onkeypress on：text可能是更好的解决方案。

注意3：如前面的回答中稍微讨论的那样，如果ajax +动画花费的时间超过5秒，则可能会出现问题，因此更好的方法可能是使用setTimeout而不是setIntervall，并在ajax和动画完成时设置新的超时

$(function()
{
  window.setInterval(function()
  {
    if($(":text").filter(function(index) { return $(this).val().trim() != ""; }).length > 0)
    {                     
       saveData();
    }
  }, 5000);
});

如何仅在表单中存在数据时保存数据？

4 个答案: