Question

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

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

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

提前谢谢！

Answer 1

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

由于您没有提及任何已发布ajaxfunction的JavaScript库，我认为您可能正在执行原始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事件绑定）：

<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的代码。

Answer 2

如果要异步执行此操作，最简单的方法是使用库。 Prototype和jQuery是不错的选择。它们都提供了带回调选项的AJAX函数，因此您可以在许多不同的情况下呈现不同的输出。

例如，您可以在成功时执行某些操作，在失败时执行另一个操作，在操作正在进行时执行另一个操作，或者为每个HTML状态代码执行操作。

当innerHtml用Ajax更改时，如何调用javascript函数？

2 个答案: