如何使用jquery進行局部頁面更新

我點擊導航菜單時，只有頁面中的內容div應該從服務器中的完整頁面刷新的html contect文件中更新，我怎樣才能實現這個使用jQuery？如何使用jquery進行局部頁面更新

2010-10-23 DSharper

構建您的菜單按往常一樣，即

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

來源

2010-10-23 05:17:26 Marko

見load

描述：從服務器加載數據和返回的HTML放入匹配元素。

來源

2010-10-23 05:12:51 BrunoLM

創建div元素並更新內容。

<div id="refreshblock"> </div>認爲這是在按鈕上單擊塊

，做一個AJAX調用和得到的結果，一旦你得到的結果對其進行處理和更新上述DIV

('#refreshoblock).html(results);

它將更新該頁面未做回發

來源

2010-10-23 05:13:15 kobe

您需要使用jQuery AJAX方法來完成此操作。有幾種方法可以解決這個問題。例如：

假設你有一個id爲「mydiv」的div，你希望用服務器的內容進行更新。然後：

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

將導致mydiv使用從url返回的內容進行更新。

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

來源

2010-10-23 05:14:05

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

來源

2010-10-23 05:18:03 polyhedron

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

來源

2013-09-21 12:58:55 Vishu

如何使用jquery進行局部頁面更新

回答

相關問題