如何在 ajax 调用中调用 e.preventDefault()？答案

【问题标题】：How can I call e.preventDefault() inside an ajax call?如何在 ajax 调用中调用 e.preventDefault()？
【发布时间】：2018-02-27 09:09:28
【问题描述】：

当用户点击我的表单的提交按钮时，handleSubmit 被调用。因此，我想在我的 ajax 调用中正确调用 e.preventDefault() ，由于 ajax 的异步性质，这是不可能的。我该如何解决这个问题？

class FormRegister extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            username: '',
            email: '',
        }

        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit(e) {
        // some code here

        // Check for username or email already exists
        $.ajax({
            type: 'POST',
            url: '/api/checkEmailUsername',
            data: {
                username: this.state.username,
                email: this.state.email
            }
        }).then(function(incomingJSON) {
            console.log('incomingJSON:', incomingJSON);
            if (incomingJSON.error) {
                e.preventDefault();
            }
        }
    });
}

【问题讨论】：

你可以apply和call
查看stackoverflow.com/questions/48075356/…
你的想法是错误的。 AJAX 是异步的，所以你不能随便打电话给e.preventDefault；您需要在 AJAX 代码之前调用它。

标签： javascript ajax reactjs

【解决方案1】：

你不能，至少没有任何影响。

当事件侦听器完成运行时，将触发事件的默认行为。稍后 HTTP 响应返回，promise 得到解决。此时为时已晚调用preventDefault()有任何效果。

你需要采取不同的方法。

可能的方法包括：

输入填写后立即执行 Ajax 相关验证，如果失败则设置一个标志。在提交事件处理程序中将其用于preventDefault。（这可能会导致时间问题，因此您会更频繁地进行服务器端输入检查）。
总是preventDefault()，然后以编程方式有条件地提交表单。

【讨论】：

【解决方案2】：

您使用的方法是异步的。这意味着您需要稍微改变处理事情的方式。将 e.preventDefault() 调用移到异步代码之前，如下所示。

此代码假定您有一个引用名称为 form 的 form 元素。

class FormRegister extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      email: '',
    }

    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(e) {
    e.preventDefault();

    $.ajax({
      type: 'POST',
      url: '/api/checkEmailUsername',
      data: {
        username: this.state.username,
        email: this.state.email
      }
    }).then(function(incomingJSON) {
      console.log('incomingJSON:', incomingJSON);
      if (incomingJSON.error) {
        // Handle errors here.
        return;
      }

      // Submit the form.
      this.refs.form.submit();
    });
  }
}

【讨论】：

"// 在这里处理其他所有事情。" — 其他一切都不首先阻止默认操作。
e.preventDefault(); 阻止默认操作。
是的。那就是问题所在。您总是阻止默认操作，但问题希望它有条件地阻止
不可能按照他的要求去做。这就是为什么我提到他要稍微改变他处理事情的方式。
但是您的细微更改只是意味着代码无法以不同的方式工作。

【解决方案3】：

 $(document).ready(() => {
  $("#loginForm").submit(function (event) {

    //prevent Default

    event.preventDefault();


    // Send form
    var form = $(this);
    $.ajax({

希望对你有帮助

见：https://stackoverflow.com/a/6960586/8631884

【讨论】：

我不明白你的意思？这有什么问题？
嗯，这是一些完全没有解释它如何解决问题的代码（它没有，因为目标是有条件地 preventDefault 取决于关于 Ajax 响应）。
@felix9607 jQuery 和 React 都是 UI 库，所以如果你已经在使用 React，那为什么还要包含 jQuery？我认为当 React 可以非常有效地为您更新 DOM 时，使用 jQuery 更新 DOM 没有任何用处。希望您明白这一点 :)