Question

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

如何使用jQuery实现这一目标？

Answer 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
    });
});

Answer 2

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

假设您有一个id =“mydiv”的div，您希望使用服务器中的内容进行更新。然后：

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

将使用从url返回的内容更新mydiv。

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

Answer 3

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

Answer 4

请参阅load

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

Answer 5

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

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

单击按钮上的

，进行ajax调用并在获得结果后获得结果并更新上面的div

('#refreshoblock).html(results);

它将更新页面而不进行回复

Answer 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

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

6 个答案: