如何使用 jQuery 进行部分页面更新？答案

【问题标题】：How to do partial page update with jQuery?如何使用 jQuery 进行部分页面更新？
【发布时间】：2010-10-23 05:10:09
【问题描述】：

我有导航菜单。单击时，仅应从 html 内容文件（在服务器中）更新页面内容 div，而无需进行整页刷新。

如何使用 jQuery 实现这一点？

【问题讨论】：

【解决方案1】：

照常构建您的菜单，即

<ul id="menu">
    <li><a href="about-us.html">About Us</a>
    <li><a href="services.html">Services</a>
    <li><a href="products.html">Products</a>
</ul>

以及内容的占位符。

<div id="content"></div>

然后运行类似这样的代码

$("#menu li a").click(function(e) {
    // prevent from going to the page
    e.preventDefault();

    // get the href
    var href = $(this).attr("href");
    $("#content").load(href, function() {
        // do something after content has been loaded
    });
});

【讨论】：

【解决方案2】：

您需要使用 jQuery AJAX 方法来完成此操作。有几种方法可以解决它。例如：

假设您有一个 id="mydiv" 的 div，您希望使用来自服务器的内容进行更新。那么：

  $("#mydiv").load("url");

将导致 mydiv 使用从 url 返回的内容进行更新。

This link 描述了 jQuery 中的各种 AJAX 方法。

【讨论】：

【解决方案3】：

$('#myLink').click(function(){
   $.get('url.php', function(data){ // or load can be used too
       $('#mydiv').html(data);
   });
});

【讨论】：

【解决方案4】：

见load

说明：从服务器加载数据并将返回的 HTML 放入匹配的元素中。

【讨论】：

【解决方案5】：

创建一个 div 元素并更新内容。

<div id="refreshblock"> </div> 假设这是块

在按钮上单击，进行 ajax 调用并在获得结果后获取结果处理它们并更新上面的 div

('#refreshoblock).html(results);

它会更新页面而不做回发

【讨论】：

【解决方案6】：

你可以在 jquery (AJAx) 的帮助下做到这一点

    <div id="leftDiv">
<s:include value="/pages/profile.jsp"></s:include>
</div>
<div>
<a href="#" id="idAnchor">Partial Refresh</a>
</div>
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
$('#idAnchor').click(function(){

$.ajax({
         url: 'getResultAction', // action to be perform
         type: 'POST',       //type of posting the data
         data: { name: 'Jeetu', age: '24' }, // data to set to Action Class
         dataType: 'html',
         success: function (html) {
         ('#leftDiv).html(html); //set result.jsp output to leftDiv 
    },
     error: function(xhr, ajaxOptions, thrownError){
       alert('An error occurred! ' + thrownError);
    },
  });
 });
})
</script>

有关详细信息，您可以在这里找到：partial page refresh code

【讨论】：