我正在使用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以及谷歌浏览器中都注意到了相同的行为。
为什么会这样?
答案 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 spec,HTML5 spec和MDC的更多信息:
答案 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来写出来。