0

想象一下以下 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 中？

4

2 回答 2

2

发生这种情况是因为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);
于 2013-03-04T22:38:39.273 回答
0

代替

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

经过：

$('#MY_CONTENT').html(data);
于 2013-03-04T22:39:45.467 回答