javascript - 如何监听 Ajax 触发元素上的 Ajax 事件？

Question

在我的 HTML 文档中，我有以下代码:

<a id='ajax-trigger' href='...', data-one='...'>
  Trigger AJAX!
</a>

在一个外部的、不是我自己的、不可编辑的 JS 库中，我有这样的东西:

$('#ajax-trigger').on('click', function() {
  $.ajax({
    type: "POST",
    url: a.attr('href'),
    data: postData,
    dataType: 'json',
    success: function(data) {
      // handle Ajax success...
    },
    error: function(jqXHR, textStatus, errorThrown) {
      // handle Ajax error...
    }
  });
});

使用上述代码后，当<a>单击链接，然后触发 Ajax 请求。

现在，为了在成功 Ajax 响应后进一步操作 DOM，我正在寻找一种方法来监听与 Ajax 触发元素相关的成功 Ajax 响应本地事件，而无需更改 JS 库源代码。也就是说，我想为<a>添加一个Ajax成功事件监听器。 HTML 文档中的元素，无需更改原始 JS 库。也许，像这样(注意:ajaxSuccess只是一个例子):

<a id='ajax-trigger' href='...', data-one='...'>
  Trigger AJAX!
</a>

<script type="text/javascript">
  $(document).ready(function() {
    $('#ajax-trigger').on('ajaxSuccess', function() {
      // handle Ajax success in addition to the 
      // Ajax success handler in the JS library...
    });
  });
</script>

用 jQuery/JS 可以吗？

Answer 1

仅使用您的代码并添加纯 JS - 解决方案 2 回答了您的问题。

顺便说一句:为什么需要添加这个事件/事件监听器？如果您希望在成功的 ajax 调用后执行一个函数，您所需要做的就是调用该函数作为 $.ajax 成功的一部分

解决方案1:

$('#ajax-trigger').on('click', function() {
  $.ajax({
    type: "POST",
    url: a.attr('href'),
    data: postData,
    dataType: 'json',
    success: function(data) {
      // handle Ajax success...
      myAjaxSuccessFunction();
    },
    error: function(jqXHR, textStatus, errorThrown) {
      // handle Ajax error...
    }
  });
});

function myAjaxSuccessFunction() {
    //do some stuff
}

解决方案 2:在元素上触发实际事件，并在元素上为该类型的事件设置一个监听器。

//create the event
var myAjaxSuccessEvent = new Event('AjaxSuccessEvent');

//attach the event to the HTML element
var myHTMLelement = document.getElementById('my-element');
myHTMLelement.addEventListener('AjaxSuccessEvent', function() {
    //do something
    alert("Event fired");
});

//or attach the listener like this, in your case
$('#ajax-trigger').on('AjaxSuccessEvent', function() {
  // handle Ajax success in addition to the 
  // Ajax success handler in the JS library...
});

//fire the event after successful AJAX call
$('#ajax-trigger').on('click', function() {
  $.ajax({
    type: "POST",
    url: a.attr('href'),
    data: postData,
    dataType: 'json',
    success: function(data) {
      // handle Ajax success...
      myHTMLelement.dispatchEvent(myAjaxSuccessEvent);
      var myElement = document.getElementById('ajax-trigger');
      myElement.dispatchEvent(myAjaxSuccessEvent);
    },
    error: function(jqXHR, textStatus, errorThrown) {
      // handle Ajax error...
    }
  });
});

解决方案 3:不使用自定义事件除非有您正在订阅的实际事件，否则您无法添加事件监听器。如果您不想添加自定义事件，则必须触发现有事件之一。

//fire the event after successful AJAX call
$('#ajax-trigger').on('click', function() {
  $.ajax({
    type: "POST",
    url: a.attr('href'),
    data: postData,
    dataType: 'json',
    success: function(data) {
      // handle Ajax success...
      // use an existing event
      var getMyElement = document.getElementById('ajax-trigger');
      getMyElement.onchange();
    },
    error: function(jqXHR, textStatus, errorThrown) {
      // handle Ajax error...
    }
  });
});

$('#ajax-trigger').on('onchange', function() {
    //do something
});