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绑定，但posting.fail()中的上下文始终相同（请求上下文）。我怎样才能进入表单上下文并查询最近的警报兄弟？

Answer 1

您有几个选择：

将event参数用于submit回调（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)
});

Answer 2

您可以使用$(this)，因为这会引用已提交的表单。

但是，由于回调中this的范围不同，您需要在回调函数之外定义它。

var that = $(this);

因此您的代码将如下所示：

var that = $(this);

//rest of code
posting.fail(function(res) {
    $(that).html(res);
});

请参阅下面的完整代码段：

＆＃13;

$(document).ready(function() {
      $(".js-form").submit(function(event) {
        var that = $(this); //reference to form submitted on
        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) {
          //can now reference the form submitted here
          that.html(res);
        });
      });

＆＃13;

Answer 3

您可以将context设置的$.ajax()选项设置为一个对象，其中this应该与jQuery {context属性的值相同。 1}}，.then()，.done()和其他延迟方法。不确定代码如何使用.fail()，尽管这也是可以使用的选项。

$.proxy

如何从回调函数查询导致ajax调用的表单？

3 个答案: