如何更新網頁內容，而無需刷新頁面的jQuery

Question

的網址爲http://example.com/index.php?main_page=index&Path=<?php echo $_GET['Path'];?>

有頁面上的一些內容：

<div><a href="http://example.com/index.php?main_page=index&Path=<?php echo $_GET['Path'];?>&sort=1a">price </a></div> 
     <div> the content....</div> 

如果我點擊的價格，內容將被安排根據價格與上升。

<div><a href="http://example.com/index.php?main_page=index&Path=<?php echo $_GET['Path'];?>&sort=1d">price </a></div> 
     <div> the content....</div> 

如果我點擊價格，內容將根據價格按降序排列。

現在，我想得到當訪客點擊price文字時，排列的內容可以交換。默認狀態是升序。並且不刷新頁面。

我該怎麼辦？

Answer 1

可以使用JQuery load從url中分配html而不重新加載頁面。
在點擊價格鏈接上，您可以加載內容div。

例如

$('#content_div').load($('#a_price').attr('href')); 

對於下面的HTML -

<a id="1d" href="example.com/index.php?main_page=index&Path=<?php echo $_GET['Path'];?>&sort=1d">1d</a> 
<a id="1a" href="example.com/index.php?main_page=index&Path=<?php echo $_GET['Path'];?>&sort=1a">1a</a> 
<div id="productListing" /> 

使用Javascript -

$('#1d, #1a').click(function(event){ 
    // Prevent default link behaviour 
    event.preventDefault(); 
    // load the div contents from the link 
    $('#producListing').load(this.attr('href')); 
}) 

添加了ID來的鏈接。可以做成通用的。 另外，鏈接內容應該僅使用結果呈現部分內容，您需要顯示結果。