Question

想象一下以下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表单。当提交此表单时，应使用AJAX刷新MY_CONTENT（因此表单的action =“。/ index.php”）。题：我发现代码仅在MY_CONTENT div包含在另一个div中时才有效。

我放了

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

在MY_CONTENT附近。必须将其更改为div以使脚本正常工作为什么MY_CONTENT必须包含在div中？

Answer 1

这是因为data包含头部和身体标签的子元素，而不是头部/身体本身的所有元素。您可以使用

删除包装器

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

相反，因为它是你摆脱包装后的body标签的直接子节点。

另一个解决方案（如FabrícioMatté所指出的）是，如果请求是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);

Answer 2

替换

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

由：

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

没有嵌套的DIV，JQuery AJAX将无法工作，为什么？

2 个答案: