Question

我已经看到了关于这个主题的几个问题和答案。但经过几个小时的测试......没有人能为我工作..任何人都可以协助解决我的问题！??

$(document).ready(function() {

   $( "#search_form" ).on('submit',function(event) {
   event.preventDefault();
   var form = $(this);
   $.ajax({
        url: "ajax_validate.php",
        type: 'POST',
        data: {host:host},
        dataType: 'json',
        success: function (data) {
          if (data.status == 'ok'){ 
          form.submit();
          }
   });
});

这让我无限循环...... 我的任务是： - 阻止表单提交的默认操作。 - 如果data.status == ok，则提交表单。

Answer 1

$('form').on('submit', function(e){
  e.preventDefault();
  console.log('submit prevented');
  
  setTimeout(function(){
    //submit the underlying form element to bypass the jquery handler
    e.target.submit();
  }, 3000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="https://stackoverflow.com/questions/50632085/jquery-ajax-form-not-submitting-after-using-preventdefault">
  <button>Submit me</button>
</form>

因此，采用这个概念，您应该能够将代码更改为以下内容。

$(document).ready(function() {
  $( "#search_form" ).on('submit',function(event) {
    event.preventDefault();
    var form = this; //This line changed from "$(this)" to just "this"

    $.ajax({
      url: "ajax_validate.php",
      type: 'POST',
      data: {host:host},
      dataType: 'json',
      success: function (data) {
        if (data.status === 'ok'){ 
          form.submit();
          //or optionally you could do
          //event.target.submit();
          //both "this" and "event.target" should point to the form submitted
        }
      }
    });
  });
});

顺便说一下，当我复制你的逻辑以显示更改时，你的成功参数没有正确关闭时出现语法错误。确保正确关闭并且控制台没有告诉您任何错误。

Answer 2

我尝试了Toplars的回答，但仍然有错误：

Uncaught TypeError: event.target.submit is not a function

Uncaught TypeError: form.submit is not a function

我得到这个工作的唯一方法是在函数中抛出ajax查询，然后对函数的结果进行操作以允许或拒绝POST。我还必须添加＆＃39; async：false＆＃39;强制ajax等待查询的响应以允许code = variable来实现。请参阅下面的代码：

  var x = ajax();
  if(x == 0){
  event.preventDefault();
  }

function ajax(){
    code = null;

   $.ajax({
        url: "ajax_validate.php",
        type: 'POST',
        async:false,
        data: {host:host},
        dataType: 'json',
        success: function (data) {
          if (data.status == 'ok'){ 
          code = 1;
          }else if(data.status == 'error'){ 
          code = 0;
          }
  });
return code;
}

JQuery / Ajax - 使用preventDefault（）后不提交表单

2 个答案: