javascript - 如何从回调函数中查询引起ajax调用的表单？

Question

我的页面上有多个具有相同结构和类的表单。

我想使用POST方法将表单数据发送到服务器，并在出现问题时显示错误消息。

因此，表单的 HTML 代码:

<form class="js-form">
  <input name="data" type="text" required>
  <button type="submit" value="Go">Go Form 1</button>
</form>
<div class="js-alert" style="display:none;">Error Message</div>

<br><br><br>

<form class="js-form">
  <input name="data" type="text" required>
  <button type="submit" value="Go">Go Form 2</button>
</form>
<div class="js-alert" style="display:none;">Error Message</div>

和js代码:

$(document).ready(function() {
  $(".js-form").submit(function(event) {
    event.preventDefault();
    var data = $(this).find("input[name='data']").val(),
        url = "/api/method";
    var posting = $.post(url, {data: data});

    posting.done(function(res) {
        $("input[name='data']").val(''); // empty all inputs in all forms
        console.log(res);
    });

    posting.fail(function(res) {
        // here I want to show the alert 
        // that is next to a form user had interacted with
    });
});

我尝试过 $.proxy 和 this 绑定(bind)，但 posting.fail() 中的上下文始终相同(请求语境)。我怎样才能到达表单上下文并查询最接近的警报同级？

Answer 1

您有几个选择:

利用 submit 回调的 event 参数(event.target 指向表单):

posting.fail(function(res) {
   console.log('do something with form', event.target)
});

将上下文 this 捕获到 posting.fail 回调之外的变量中:

$(document).ready(function() {
  $(".js-form").submit(function(event) {
    event.preventDefault();
    // capture context!
    var form = this;
    var data = $(this).find("input[name='data']").val(),
        url = "/api/method";

    var posting = $.post(url, {data: data});

    posting.done(function(res) {
        $("input[name='data']").val(''); // empty all inputs in all forms
        console.log(res);
    });

    posting.fail(function(res) {
        console.log('do something with form', form)
    });
});

如果你可以支持 ES6，这就简单多了 - 只需使用箭头函数即可:

posting.fail((res) => {
   console.log('do something with form', this)
});