基于ajax响应提交导致循环，如何正确调用原生提交？

Posted 2023-05-09

【中文标题】基于ajax响应提交导致循环，如何正确调用原生提交？

【英文标题】：Submit based on ajax response causes loop, how to properly call native submit?

【发布时间】：2018-04-10 10:45:40

【问题描述】：

我有一个表单，提交的继续取决于 ajax 响应。

    $('#restaurant_form').on('submit', function(e) 
        e.preventDefault();
        fetchRestaurant(); // Checks if restaurant is already registered
    );

在fetchRestaurant()，当餐厅还不存在时，我会调用它来继续：

$('#restaurant_form').submit();

但我有一个循环，似乎触发了提交的事件处理程序。如何正确调用原生提交？

【问题讨论】：

细节不足，无法真正理解核心问题。创建一个演示问题的最小 sn-p。

细节就足够了，亚当，你只是不明白这一点。我完全理解他卡在哪里了。

在实际元素上调用 submit()，而不是在 jQuery 包装对象上。

@PatrickEvans 我将 fetchRestaurant 的实现移至提交的事件处理程序。在我的提交处理程序中，form = $(this) 然后在响应中调用form.submit()，它仍在循环。

$(this) 仍然是一个 jQuery 包装的对象...您需要在实际的表单元素上调用 submit，例如 this.submit()

【参考方案1】：

不要使用 preventDefault 方法，你会在不可提交的循环中结束。使用返回。

<form onsubmit="return validateRestaurant(this)">
  ...
</form>

<script src="https://unpkg.com/jquery@3.2.1/dist/jquery.min.js"></script>

<script>
  function validateRestaurant (form) 
    $.get('fetchRestaurant.php')
     .then(function (restaurant) 
        if (restaurant.exists) form.submit()
      )
    return false
  
</script>

【讨论】：

这对我不起作用。它总是继续提交。似乎事件处理程序有超时，因为当我添加了一个 alert() 并且它有时间等待响应时，它可以工作。但是如果没有 alert() 它会立即进行提交。

如果在callback中直接设置return false，还是一直继续？

在收到回复之前先转到else return false

@Waldermarlce $.get() 是异步的，你不能从中返回

是的，即使返回为假，它也会继续提交。