javascript - 当innerHtml随Ajax发生变化时，如何调用javascript函数来运行？

Question

我正在使用 Ajax 通过在链接上使用 onclick 来更改 div 的innerHtml。从服务器检索文件并替换 div 的内容后，我需要调用 javascript 函数。我该怎么做？

<div id="thisDiv">
<a href="this.php" onclick="ajaxfunction('thisfile.php','thisDiv');return false;">link</a>
...
</div>

ajaxfunction函数将thisDiv的innerHtml替换为thisfile.php。

提前谢谢您!

Answer 1

我认为，假设您的 AJAX 请求是异步的，最好的方法是向您的函数添加一个回调参数，该参数将在请求结束时执行。

由于您没有提及任何 JavaScript 库，也没有发布您的 ajaxfunction，我想您可能正在执行原始 XHR 请求，如果是这样，您可以例如:

function ajaxfunction (url, elementId, callback) { 
  var xhr = new XMLHttpRequest();
  xhr.open("GET", url, true);
  xhr.onreadystatechange = function(){
    if ( xhr.readyState == 4 ) {
      if ( xhr.status == 200 ) {
        document.getElementById(elementId).innerHTML = xhr.responseText;
        callback(); // the content has been loaded to the DOM, executing callback
      } else {
        alert('error');
      }
    }
  };
  xhr.send(null);
}

您可以使用这样的函数(请注意，我根本不建议在 HTML 上使用内联 JavaScript 事件绑定(bind)):

<a href="this.php" 
onclick="ajaxfunction('thisfile.php','thisDiv', otherFn);return false;">link</a>

推荐方式:

<a href="this.php" id="linkId">link</a>

<小时/>

window.onload = function () {
  // Event binding...
  document.getElementById('linkId').onclick = function () {
    ajaxfunction('thisfile.php','thisDiv', function () {
      alert('Content retrieved, this is the callback!');
      return false;
    });
  };
  // .... 
};

要获得更全面的示例，请发布 ajaxfunction 的代码。