Question

我正在设置我的网页，以便在用户点击导航链接时使用JQuery更新页面而不刷新。我页面的基本结构如下：

<!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是什么。

所以发生的奇怪事情是，特别是对于一个页面，如果我通过在浏览器地址栏中输入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>

或者当我在地址栏中输入网址

时，图片链接如下所示

<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="">

有没有人知道为什么会这样？

Answer 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将尝试修复它并经常混淆它

JQuery：AJAX“get”响应混乱了HTML标签

1 个答案: