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

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

我希望使用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>

---

我尝试了

$.proxy

和

此绑定，但
posting.fail（）
中的上下文总是相同的（请求上下文）。如何访问表单上下文并查询最近的警报同级？
您有几个选项：

使用
event
参数进行
submit
回调（
event.target
指向表单）：

将上下文
捕获到
发布之外的变量中。失败
回调：

$(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)
});

您有几个选择：

使用
event
参数进行
submit
回调（
event.target
指向表单）：

将上下文
捕获到
发布之外的变量中。失败
回调：

$(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)
});

您可以使用
$（this）
，因为这将引用提交的表单

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

var that = $(this);

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

var that = $(this);

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

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


$（文档）.ready（函数（）{
$（“.js表单”）.submit（函数（事件）{
var that=$（this）；//对在上提交的表单的引用
event.preventDefault（）；
var data=$（this）.find（“输入[name='data']”）.val（），
url=“/api/method”；
var posting=$.post（url{
数据：数据
});
过账。完成（功能（res）{
$（（“输入[name='data']”）。val（“”）；//清空所有形式的所有输入
控制台日志（res）；
});
过帐失败（功能（res）{
//现在可以参考此处提交的表格
html（res）；
});
})；
您可以使用
$（this）
，因为这将引用提交的表单

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

var that = $(this);

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

var that = $(this);

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

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


$（文档）.ready（函数（）{
$（“.js表单”）.submit（函数（事件）{
var that=$（this）；//对在上提交的表单的引用
event.preventDefault（）；
var data=$（this）.find（“输入[name='data']”）.val（），
url=“/api/method”；
var posting=$.post（url{
数据：数据
});
过账。完成（功能（res）{
$（（“输入[name='data']”）。val（“”）；//清空所有形式的所有输入
控制台日志（res）；
});
过帐失败（功能（res）{
//现在可以参考此处提交的表格
html（res）；
});
})
您可以将
$.ajax（）
设置的
上下文
选项设置为一个对象，其中
此
应该是在jQuery
中的
上下文
属性值处设置的同一个对象。然后（）
，
.done（）
，
失败（）
和其他延迟的方法。不确定代码是如何使用的
$.proxy
，尽管这也是一个可以使用的选项

   $.ajax({/* settings, */ context:{} /* set `this` here */})
   .then(function() {
     // `this` : `this` set at `context`
   })
   .fail(function() {
     // `this` : `this` set at `context`
   })

您可以将
$.ajax（）
设置的
context
选项设置为一个对象，其中
此
应该是在jQuery
中
context
属性的值处设置的同一个对象。然后（）
，
完成（）
，
失败（）
和其他延迟的方法。不确定代码是如何使用的
$.proxy
，尽管这也是一个可以使用的选项

   $.ajax({/* settings, */ context:{} /* set `this` here */})
   .then(function() {
     // `this` : `this` set at `context`
   })
   .fail(function() {
     // `this` : `this` set at `context`
   })

您应该能够在
fail
函数外部的另一个变量中保留
此
，然后在内部使用它。您应该能够在
fail
函数外部的另一个变量中保留
此
，然后在内部使用它。感谢详细的选项说明。我选择捕获上下文，因为它看起来像它最具可读性。感谢详细的选项描述。我选择捕获上下文，因为它看起来最具可读性。