为什么使用AJAX返回的Javascript代码不会在指定的<div>中写入,但它会替换整个页面?</div>

时间:2011-07-15 10:23:21

标签: php javascript jquery ajax

我正在使用AJAX(使用jQuery)请求包含对Apache + PHP服务器的Javascript函数调用的标记。这是HTML和AJAX代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://localhost/LivingLab/javascript/jquery.min.js"></script>
</head>

<body>
<a href="javascript: void(0)" onclick="
    $.post(
        'http://localhost/test.php',    // server target page
        {some_var: 'abc'},              // data to be sent via POST method
        function(data) {                // JS callback function
            $('#container').html(data); // innerHTML of <div id="container"> will be replaced
        }
    )
">Click me!</a>
<div id="container"></div>
</body>
</html>

AJAX请求页面'http://localhost/test.php',其中包含以下PHP代码:

<?php
    echo '<script type="text/javascript"> document.write("Javascript output"); </script>';
?>

当我点击链接时,在AJAX请求之后,整个页面被“Javascript output”替换,而不是仅在id为“container”的div标签内写入。

如果PHP服务器脚本写了其他内容,而不是像这样的脚本标记:

<?php echo 'text' ?>

AJAX调用表现正常,通过将id替换为id“container”而不是整个页面。

我尝试使用Wireshark调查此页面传输的HTTP数据,它似乎不是HTTP问题,因为服务器响应正是应该如此:

<script type="text/javascript"> document.write("Javascript output"); </script>

在没有AJAX的情况下运行Javascript代码不会替换整个页面,只有在使用AJAX返回脚本标记时才会发生这种情况。 A在Firefox 3和5以及谷歌浏览器中都注意到了相同的行为。

为什么会这样?

3 个答案:

答案 0 :(得分:9)

document.write通常在页面的主要加载期间使用,在此期间它输出到浏览器读取以呈现主页面的解析流。如果在页面的初始加载完成后使用它,它会隐式在文档上执行open,这会完全撕下文档并重新开始使用新编写的内容。

简短版本是:仅在主页加载期间使用document.write(如果是)。页面加载后,请改为使用DOM操作。

示例(live copy):

<body>
  <input type='button' id='theButton' value='Click Me'>
  <script>
    document.write(
      "<p><code>document.write</code> is fine here, during " +
      "the main load of the page.</p>");
    document.getElementById("theButton").onclick = function() {
      document.write(
        "<p>But not here, because the initial " +
         "page load is complete and using " +
         "<code>document.write</code> at this point tears " +
         "down the document and starts  new one.</p>");
    };
  </script>
</body>

来自DOM2 HTML specHTML5 specMDC的更多信息:

  • document.writeDOM2 | HTML5 | MDC
  • document.openDOM2 | HTML5 | MDC
    (如果您在加载页面后调用它,则由document.write隐式调用)

答案 1 :(得分:0)

因为jQuery会识别javascript块并对页面运行它,而不是目标容器。

答案 2 :(得分:0)

https://groups.google.com/forum/#!topic/jquery-en/tzu5n5k8Jp4

<script type="text/javascript"> document.write("Javascript output"); </script>

为什么不返回“JavaScript输出”,因为你正在改变$('#container')的值,无需尝试使用内联JavaScript document.write来写出来。