JQuery AJAX没有嵌套的DIV不能工作，为什么? - JQuery AJAX won't work without nested DIV, why?

JQuery AJAX won't work without nested DIV, why?

想象下面的index.php:

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
    <form id="MY_FORM" action="./index.php" method="get">
        <input name="var_name">
        <input type="submit">
    </form> 
    <!-- <div> -->
    <div id="MY_CONTENT">
        <?php
            var_dump( $_GET ); 
        ?>
    </div>
    <!-- </div> -->
    <script type="text/javascript">
        $('#MY_FORM').submit(function()
        {
            var form = $(this);
            $.get('./', form.serialize(), function(data)
            {
                var updated = $('#MY_CONTENT', data);
                $('#MY_CONTENT').replaceWith(updated);
            });
            return false;
        });
    </script>
</body>
</html>

有一个简单的AJAX表单。当这个表单被提交时，MY_CONTENT应该用AJAX刷新(因此表单的action="./index.php")。问题:我发现只有当MY_CONTENTdiv被包含在另一个div中时，代码才能工作。

我把

<!-- <div> -->
<!-- </div> -->

MY_CONTENT左右。必须将其更改为div才能使脚本正常工作。
为什么MY_CONTENT必须包装在div中?

这是因为data包含了head和body标签的所有子元素，但不包括head/body本身。您可以使用

删除包装器

var updated = $(data).filter("#MY_CONTENT")

而不是

，因为在去掉包装器之后，它是body标签的直接子标签。

另一个解决方案(如Fabrício matt所指出的)是，如果请求是ajax请求，则只返回目标html。

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && Strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    var_dump( $_GET );
}
else {
   ... rest of your page ...

那么你可以直接写

$('#MY_CONTENT').html(data);

replace

var updated = $('#MY_CONTENT', data);
$('#MY_CONTENT').replaceWith(updated);

由:

$('#MY_CONTENT').html(data);