Question

我正在尝试在2个不同的DIV中加载两个不同的文件。这是我正在使用的代码

var please_wait = null;
function open_url(url, target) {
    if (!document.getElementById) {
        return false;
    }
    if (please_wait != null) {
        document.getElementById("target").innerHTML = please_wait;
    }
    if (window.ActiveXObject) {
        link = new ActiveXObject("Microsoft.XMLHTTP");
    } else if (window.XMLHttpRequest) {
        link = new XMLHttpRequest();
    }
    if (link == undefined) {
        return false;
    }
    link.onreadystatechange = function () {
        response(url, target);
    }
    link.open("GET", url, true);
    link.send(null);
}
function response(url, target) {
    if (link.readyState == 4) {
        document.getElementById(target).innerHTML = (link.status == 200) ? link.responseText : "Ooops!! A broken link! Please contact the webmaster of this website  and give him the following errorcode: " + link.status;
    }
}
function set_loading_message(msg) {
    please_wait = Loding;
}

并且在链接上调用我正在使用此代码...

<a href="javascript:void(0)" onclick="open_url('firstpage.php','containerA');open_url('secondpage.php','containerB')">  Click Here </a>

它只是在WHATSOEVER案例中加载后一个。我尝试了一些不同的东西，完全采用两种不同的方法，例如open_url2但无济于事。它在DIV中一次只加载一个请求。任何解决方案。

Answer 1

你通过使用旧学校的ajax电话做了很多额外的工作。我认为你有更好的运气jQuery ajax方法。

至于后者加载的原因，您是否检查过firebug或其他网络工具以查看是否两个文件都已加载？ 如果它们都被加载，我相信可能发生的是后者用你正在使用的.innerHTML函数覆盖第一个。你想追加。查看这些链接，使用jQuery更容易：

Making Ajax calls

Appending to an element

Answer 2

您似乎正在使用link作为全局变量。因此，对open_url()的第二次调用会覆盖从第一次创建的link的值。

您应该将其设为open_url()函数的本地，并将其传递给response()函数。

var please_wait = null;
function open_url(url, target) {

      // v----declare the variable
    var link;
    if (!document.getElementById) {
        return false;
    }
    if (please_wait != null) {
          // ----------------------v---"target" is a String???
        document.getElementById("target").innerHTML = please_wait;
    }
    if (window.ActiveXObject) {
        link = new ActiveXObject("Microsoft.XMLHTTP");
    } else if (window.XMLHttpRequest) {
        link = new XMLHttpRequest();
    }
    if (link == undefined) {
        return false;
    }
    link.onreadystatechange = function () {
        response(url, target, link); // <-- pass "link" to the response
    }
    link.open("GET", url, true);
    link.send(null);
}

  // receive "link"-------------v----so that you have the correct xhr object
function response(url, target, link) {
    if (link.readyState == 4) {
        document.getElementById(target).innerHTML = (link.status == 200) ? link.responseText : "Ooops!! A broken link! Please contact the webmaster of this website  and give him the following errorcode: " + link.status;
    }
}
function set_loading_message(msg) {
    please_wait = Loding;
}

Answer 3

正如已经说过的，你对AJAX有争议。

以下是您的代码在jQuery中的外观

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"</script>

<script type="text/javascript">
$(document).ready(function() {
  $("#link1").click(function() {
    $("#containerA').load("firstpage.php",function() {
      $("#containerB').load("secondpage.php");
    });
  });
});
</script>

<a id="link1" href="#">  Click Here </a>

或者使用jQuery的队列管理器插件

一键单击Javascript两个功能

3 个答案: