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 フォームがあります。このフォームが送信されると、MY_CONTENT を AJAX で更新する必要があります (したがって、フォームの action="./index.php")。質問: MY_CONTENT div が別の div で囲まれている場合にのみコードが機能することがわかりました。

私は

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

MY_CONTENT あたり。スクリプトを機能させるには、これを div に変更する必要があります。
MY_CONTENT を div でラップする必要があるのはなぜですか?

4

2 に答える 2

2

これ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);
于 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 に答える