如何使用jquery进行局部页面更新

问题描述：

我点击导航菜单时，只有页面中的内容div应该从服务器中的完整页面刷新的html contect文件中更新，我怎样才能实现这个使用jQuery？如何使用jquery进行局部页面更新

答

构建您的菜单按往常一样，即

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

答

见load

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

答

创建div元素并更新内容。

<div id="refreshblock"> </div>认为这是在按钮上单击块

，做一个AJAX调用和得到的结果，一旦你得到的结果对其进行处理和更新上述DIV

('#refreshoblock).html(results);

它将更新该页面未做回发

答

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

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

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

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

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

答

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

marko's得到了最完整的答案 – polyhedron 2010-10-23 05:19:12

非常感谢所有.... – DSharper 2010-10-23 07:50:36

答

你可以做到这一点，使用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进行局部页面更新

相关推荐