jquery에 의해 페이지를 새로 고치지 않고 페이지 내용을 업데이트하는 방법

Question

페이지 URL은 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를로드 할 수 있습니다.

<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" /> 

자바 스크립트 - - 아래의 HTML에 대한

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

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

링크에 ID를 추가했습니다. 제네릭으로 만들 수 있습니다. 또한 링크 콘텐츠는 결과로만 부분 콘텐츠를 렌더링해야합니다.이 콘텐츠는 표시해야합니다.