不显眼的 ajax 事件中的表单元素访问答案

【问题标题】：Form element access in unobtrusive ajax event不显眼的 ajax 事件中的表单元素访问
【发布时间】：2013-08-17 13:16:35
【问题描述】：

我想为使用不显眼的 ajax 的特定表单挂钩 ajax 回调。使用不显眼的 ajax 的这种标准形式的 ajax 调用是没有问题的：

<form action="/xyz" data-ajax="true" data-ajax-method="POST" id="someformid" method="post">
    <input type="text" name="bla" />
    <button>submit</button>
</form>

我的第一个方法是这样的：

var form = $("#someformid");
$(document).ajaxComplete(function (e, request, options) {
    // is not hitting here
});

但这似乎不起作用。这种方法会命中处理程序，但不仅仅是针对所需的形式。但对于所有 ajaxComplete 事件。

var form = $("#someformid");
form.submit(function (eevent) {
    $(document).ajaxComplete(function (e, request, options) {
        // this hits ok. but not just for this form
    });
});

下一个选项是使用“data-ajax-success”。但这似乎没有提供表单上下文。

所以问题：我如何专门为一种表单连接 ajaxComplete 事件。

注意： 我想避免像匹配 url 或向查询中添加一些唯一 id 这样的变通方法。

谢谢！

【问题讨论】：

我会尝试提供 <button> 和 id 并使用该 id 作为 .ajaxComplete() 的选择器。只是一个建议，不知道是否有效。

标签： asp.net-mvc jquery unobtrusive-javascript unobtrusive-ajax

【解决方案1】：

来自.ajaxComplete() 文档：

从 jQuery 1.8 开始，.ajaxComplete() 方法只能附加记录。调用所有 ajaxComplete 处理程序，不管是什么 Ajax 请求已完成。如果你必须区分请求，使用传递给处理程序的参数。每次一个 ajaxComplete 处理程序被执行，它被传递事件对象， XMLHttpRequest 对象，以及在请求的创建。例如，您可以将回调限制为仅处理处理特定 URL 的事件：

所以，我读这篇文章的方式是，如果你知道你将运行一个特定的 URL（你的 php 处理脚本），那么你可以在设置中将该 URL 传递给 .ajaxComplete() 方法....（在你的情况下，“/xyz”）

$( document ).ajaxComplete(function( event, xhr, settings ) {
  if ( settings.url === "/xyz" ) {
    $( ".log" ).text( "Triggered ajaxComplete handler. The result is " +
      xhr.responseHTML );
  }
});

【讨论】：