1

ユーザーがナビゲーション リンクをクリックしたときに更新せずに JQuery を使用してページを更新するように Web ページを設定しています。私のページの基本的な構造は次のようになります。

<!DOCTYPE html >
<html>
<head>
  <title><?php if(x($page,'title')) echo $page['title'] ?></title>
  <script>var baseurl="<?php echo $a->get_baseurl() ?>";</script>
  <?php if(x($page,'htmlhead')) echo $page['htmlhead'] ?>
</head>
<body>
    <div class='main-container'>
        <?php if(x($page,'nav')) echo $page['nav']; ?>
        <div class='main-content-loading'><img src="/view/theme/zp/ajax-loader.gif" alt="Please wait..."></div>
        <div class='main-content-container'>
        <aside><?php if(x($page,'aside')) echo $page['aside']; ?></aside>
        <section><?php if(x($page,'content')) echo $page['content']; ?>
            <div id="page-footer"></div>
        </section>
        <right_aside><?php if(x($page,'right_aside')) echo $page['right_aside']; ?></right_aside>
        <footer><?php if(x($page,'footer')) echo $page['footer']; ?></footer>
        </div>
    </div>
</body>
</html>

主なセクションは、PHP スクリプトを使用して埋められます。

ページを更新するために使用している JQuery 関数は次のとおりです。

$(document).ready(function() {

    $('.nav-load-page-link').click(function() {
        getPageContent( $(this).attr('href') );
        hideNavMenu( '#' + $(this).closest('ul').attr('id') );
        return false;
    });
}

function getPageContent(url) {

    var pos = $('.main-container').position();

    $('.main-container').css('margin-left', pos.left);  
    $('.main-content-container').hide(0, function () {
        $('.main-content-loading').show(0);
    });

    $.get(url, function(html) {
        console.log($('.main-content-container').html());
        $('.main-content-container').html( $('.main-content-container', html).html() );
        console.log($('.main-content-container').html());
        $('.main-content-loading').hide(function() {
            $('.main-content-container').fadeIn(800,function() {
                $('.main-container').css('margin-left', 'auto'); 
            });
        });
    });
}

示されているように、コンソール ロギング コマンドがあります。これにより、GET 要求の結果を適用する前後の HTML を確認できます。

そのため、奇妙なことに、特に 1 つのページについて、URL をブラウザーのアドレス バーに入力して読み込むと、期待どおりに読み込まれます。しかし、JQuery 関数を使用してロードすると、HTML タグが文字化けして表示されます。たとえば、アドレス バーに URL を入力して読み込むと、次のようなフォームが表示されます。

<div id="connect-desc">Enter address or web location</div> 
<form action="follow" method="post"> 
<input id="side-follow-url" name="url" size="24" title="Example: bob@example.com, http://example.com/barbara" type="text">
<input id="side-follow-submit" name="submit" value="Connect" type="submit"> 
</form> 
</div>

JQuery関数を使用すると、次のようになります

<div id="connect-desc">Enter address or web location</div> 
<form action="follow" method="post">
</form> 
<input id="side-follow-url" name="url" size="24" title="Example: bob@example.com, http://example.com/barbara" type="text">
<input id="side-follow-submit" name="submit" value="Connect" type="submit"> 
</div>

または、アドレス バーに URL を入力すると、次のような画像リンクが表示されます

<a href="https://some-place" title="some-title">
<img src="https://img-loc" alt="">
</a>

JQuery関数で次のようになります

<a href="https://some-place" title="some-title">
</a>
<img src="https://img-loc" alt="">

なぜこれが起こっているのか、誰にもアイデアがありますか?

4

1 に答える 1

1

解決策は、サーバーから送り返す html が有効であることを確認することです。Jquery 1.4+ は、有効な html を強制します。例：

<table>
  <tr>
     <td>generated html from server</td>
  </tr>
   <tr>
     <td>generated html from server</td>
  </tr>
 <div>
     <form>
        <input type="text">
     </form>

</table>タグがないため、上記は検証されません。Jqueryはそれを修正しようとし、しばしばごちゃ混ぜになります

于 2012-10-17T21:43:44.077 に答える