jquery 모바일에서만 콘텐츠를 변경하는 방법은 무엇입니까?

Question

<div data-role="page"> 
<div data-role="header"> 
    <h1>jQuery Mobile Example</h1> 
</div> 
<div data-role="content" class="ui-content"> 
    <p>First</p> 
</div> 
<div data-role="footer"> 
    <div data-role="navbar" > 
     <ul> 
     <li><a href="#" class="ui-btn-active">First</a></li> 
     <li><a href="/test/second.jsp">Second</a></li> 
     </ul> 
    </div> 
</div> 
</div> 

내가 두 번째 버튼을 클릭하면서, 서버 측에서 수신 전용 콘텐츠 사업부를 변경하려면

<p>Second<p/> 

second.jsp.

머리글과 바닥 글을 변경하면 안됩니다. 도 지원 내역 뒤로 슬라이드 애니메이션.

? load()

$('.ui-content').load('/path/to/server/second.jsp'); 

그것은 것

Answer 1

jQuery를 AJAX 편리한 방법을 사용할 수 $(".ui-content").html("New content");

를 사용 ajax를 호출하고 서버의 응답으로 selector의 요소 (들)의 html을 서버의 응답으로 바꿉니다.

load() API Docs

Answer 2

사용 아약스 호출 이후의 success, 그래서

<li><a id="secondAjax" href="javascript:void(0);">Second</a></li>

$("#secondAjax").click(function(){ 
    $.ajax({ 
     url:'YOUR LOCALHOST PATH/test/second.jsp', 
     success:function(data){ 
     $(".ui-content").html(data); 
     } 
    }); 
});