为什么使用 AJAX 返回的 Javascript 代码未写入指定的<div> ，但它会替换整个页面？</div><div id="text_translate"><p> 我用 AJAX（使用 jQuery）请求一个包含 Javascript function 调用 Apache+PHP 服务器的标签。 这是 HTML 和 AJAX 代码：</p><pre> <.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></pre><p> AJAX 请求具有以下 PHP 代码的页面“http://localhost/test.php”：</p><pre> <?php echo '<script type="text/javascript"> document.write("Javascript output"); </script>'; ?></pre><p> 当我点击链接时，在 AJAX 请求之后，整个页面被“Javascript 输出”替换，而不是仅在 id 为“容器”的 div 标记内写入。</p><p> 如果 PHP 服务器脚本写入其他内容，而不是像这样的脚本标记：</p><pre> <?php echo 'text'?></pre><p> AJAX 调用行为正常，通过将 div 替换为 id“容器”而不是整个页面。</p><p> 我尝试使用 Wireshark 调查此页面传输的 HTTP 数据，它似乎不是 HTTP 问题，因为服务器响应正是它应该的样子：</p><pre> <script type="text/javascript"> document.write("Javascript output"); </script></pre><p> 在没有 AJAX 的情况下运行 Javascript 代码不会替换整个页面，仅当使用 AJAX 返回脚本标记时才会发生这种情况。 A 注意到 Firefox 3 和 5 以及 Google Chrome 中的相同行为。</p><p> 为什么会这样？</p></div>
[英]Why a Javascript code returned with AJAX doesn't write in a specified <div>, but it replaces the whole page?
问题描述
I am requesting with AJAX (using jQuery) a tag which contains a Javascript function call to an Apache+PHP server.
我用 AJAX（使用 jQuery）请求一个包含 Javascript function 调用 Apache+PHP 服务器的标签。 Here is the HTML and AJAX code:这是 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 requests the page 'http://localhost/test.php' which has the following PHP code: AJAX 请求具有以下 PHP 代码的页面“http://localhost/test.php”：
<?php
echo '<script type="text/javascript"> document.write("Javascript output"); </script>';
?>
When I click on the link, after the AJAX request, the whole page is replaced by "Javascript output", instead of writing this only inside the div tag with id "container".当我点击链接时，在 AJAX 请求之后，整个页面被“Javascript 输出”替换，而不是仅在 id 为“容器”的 div 标记内写入。
If the PHP server script writes something else, instead of a script tag like this:如果 PHP 服务器脚本写入其他内容，而不是像这样的脚本标记：
<?php echo 'text' ?>
the AJAX call behaves normal, by replacing div with id "container" and not the whole page. AJAX 调用行为正常，通过将 div 替换为 id“容器”而不是整个页面。
I tried to investigate HTTP data transfered by this pages with Wireshark and it doesn't seem to be an HTTP problem because server response is exactly how it should be:我尝试使用 Wireshark 调查此页面传输的 HTTP 数据，它似乎不是 HTTP 问题，因为服务器响应正是它应该的样子：
<script type="text/javascript"> document.write("Javascript output"); </script>
Running the Javascript code without AJAX does not replace the whole page, this happens only when the script tag is returned using AJAX.在没有 AJAX 的情况下运行 Javascript 代码不会替换整个页面，仅当使用 AJAX 返回脚本标记时才会发生这种情况。 A noticed the same behavior in Firefox 3 and 5 and also in Google Chrome. A 注意到 Firefox 3 和 5 以及 Google Chrome 中的相同行为。
Why does this happen?为什么会这样？
3 个解决方案
解决方案1
9 已采纳 2011-07-15 10:26:43
document.write is normally used during the main load of the page, during which it outputs to the parsing stream that the browser reads to render the main page. document.write通常在页面的主要加载过程中使用，在此期间它输出到浏览器读取以呈现主页的解析 stream。 If you use it after the initial load of the page is complete, it implicitly does an open on the document, which completely tears down the document and starts fresh with the newly-written content.如果您在页面的初始加载完成后使用它，它会隐式open文档，这会完全撕下文档并从新写入的内容重新开始。
The short version is: Only use document.write during main page load (if then).简短的版本是：仅在主页加载期间使用document.write （如果那时）。 After the page has loaded, use DOM manipulation instead.页面加载后，请改用 DOM 操作。
Example ( 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>
More about from the DOM2 HTML spec , the HTML5 spec , and MDC :有关DOM2 HTML 规范、 HTML5 规范和MDC的更多信息：
解决方案2
0 2011-07-15 10:27:41
Because jQuery will recognise the javascript block and run it against the page, not the target container.因为 jQuery 将识别 javascript 块并针对页面而不是目标容器运行它。
解决方案3
0 2011-07-15 10:28:56
https://groups.google.com/forum/#!topic/jquery-en/tzu5n5k8Jp4 https://groups.google.com/forum/#!topic/jquery-en/tzu5n5k8Jp4
<script type="text/javascript"> document.write("Javascript output"); </script>
Why not just return "JavaScript Output" since you're altering the value of $('#container') anyway, there's no need to try to use an inline JavaScript document.write to write it out.为什么不直接返回“JavaScript 输出”，因为无论如何您都在更改 $('#container') 的值，无需尝试使用内联 JavaScript document.write 将其写出。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.