JQuery的POST功能

我使用这个jQuery功能发布形式：JQuery的POST功能

function SubmitForm(form, postaction) { 
    $(form).submit(function(event){ 
     $('#LoadingDiv').show(); 
     var data = $(this).serialize(); 
     $.post(postaction, data) 
     .success(function(result){ 
      console.log(result); 
      $('#LoadingDiv').hide(); 
      $('.tabcontent').html(result); 
      $("html, body").animate({ scrollTop: 0 }, "slow"); 
     }) 
     .error(function(){ 
      $('.tabcontent').html('Error Loading Page'); 
      $("html, body").animate({ scrollTop: 0 }, "slow"); 

      console.log('Error loading page'); 
     }) 
     return false; 
    }); 
}

我有喜欢的形式按钮：

<input type="submit" onclick="SubmitForm('#SearchHistoricInvoices', '/billing/viewhistoricinvoices.php');" value="Search" />

和表单标签：

<form method="post" id="SearchHistoricInvoices">

但是当使用上面的按钮提交表单时，它似乎刷新整个页面而不是实际提交表单

我检查了控制台，并没有错误

来源

2015-02-10 Charles

要绑定提交的onclick处理程序中处理。我猜，你的提交处理程序没有被解雇，所以FORM被引用 – 2015-02-10 20:05:51

从''中删除'type =“submit”'。这样做会启用您正在遇到的默认表单提交行为。 – Brett 2015-02-10 20:14:58

你应该使用功能，而不是直接调用另一个函数内。

$('#SearchHistoricInvoices').submit(function(event){ 
      event.preventDefault() 
      $('#LoadingDiv').show(); 
      var data = $(this).serialize(); 
      $.post($(this).prop('action'), data) 
      .success(function(result){ 
       console.log(result); 
       $('#LoadingDiv').hide(); 
       $('.tabcontent').html(result); 
       $("html, body").animate({ scrollTop: 0 }, "slow"); 
      }) 
      .error(function(){ 
       $('.tabcontent').html('Error Loading Page'); 
       $("html, body").animate({ scrollTop: 0 }, "slow"); 

       console.log('Error loading page'); 
      }) 
      return false; 
     });

尝试如所提here在第一行使用jQuery event.preventDefault()。

您的代码应该是这样的

function SubmitForm(form, postaction) { 
     $(form).submit(function(event){ 
      event.preventDefault() 
      $('#LoadingDiv').show(); 
      var data = $(this).serialize(); 
      $.post(postaction, data) 
      .success(function(result){ 
       console.log(result); 
       $('#LoadingDiv').hide(); 
       $('.tabcontent').html(result); 
       $("html, body").animate({ scrollTop: 0 }, "slow"); 
      }) 
      .error(function(){ 
       $('.tabcontent').html('Error Loading Page'); 
       $("html, body").animate({ scrollTop: 0 }, "slow"); 

       console.log('Error loading page'); 
      }) 
      return false; 
     }); 
    }

这将停止默认submit event并使用jQuery后发送请求。

来源

2015-02-10 20:07:40

我刚刚尝试过这一点，#LoadingDiv显示并不隐藏，所以我不认为它提交正确仍然 – Charles 2015-02-10 20:13:31

@Charles这意味着你的服务器没有发送'200 OK'响应头。然后请求出现问题。你能从错误控制台粘贴错误日志吗？ – 2015-02-10 20:17:29

有一些错误，说Uncaught TypeError：undefined不是函数 – Charles 2015-02-10 20:22:27

这个问题是因为你只附上表格submit处理程序后表格已提交。改变你的逻辑使用jQuery事件挂钩，它变得更简单和整洁。试试这个：

<form method="post" id="SearchHistoricInvoices" action="/billing/viewhistoricinvoices.php"> 
    <!-- other inputs --> 
    <input type="submit" value="Search" /> 
</form>

$('#SearchHistoricInvoices').submit(function(event) { 
    event.preventDefault(); 
    $('#LoadingDiv').show(); 
    $.post($(this).prop('action'), $(this).serialize()).success(function(result){ 
     console.log(result); 
     $('#LoadingDiv').hide(); 
     $('.tabcontent').html(result); 
     $("html, body").animate({ scrollTop: 0 }, "slow"); 
    }).error(function(){ 
     $('.tabcontent').html('Error Loading Page'); 
     $("html, body").animate({ scrollTop: 0 }, "slow"); 
     console.log('Error loading page'); 
    }) 
});

来源

2015-02-10 20:08:06

JQuery的POST功能

回答

相关问题