jquery mobile - List item to detailed view page

jquery mobile - List item to detailed view page

    I have a page which contains the list item. I need to fetch the data from my server on list item click and need to show the the detailed data on the second page. For each list item click i need to show different information.

    1. <!-- First page -->
    2. <div data-role="page" data-theme="c" id="home-page">
    3.         <div data-role="header"   data-iconpos="left">
    4.             <h1>Visit Kerala</h1>
    5.             <a href="#link" data-role="button" data-icon="home" data-iconpos="notext">Home</a>
    6.         </div>
    8.         <div data-role="content" data-content-theme="a">
    9.             <ul data-role="listview" data-theme="b" id="indexList">
    10.                 <li><a href="#">Pilgrim Centres</a></li>
    11.                 <li><a href="#">Waterfalls</a></li>
    12.                 <li><a href="#">Wildlife</a></li>
    13.                 <li><a href="#">Beaches</a></li>
    14.                 <li><a href="#">Houseboats</a></li>
    15.                 <li><a href="#">Backwaters</a></li>
    16.                 <li><a href="#">Hills</a></li>
    17.                 <li><a href="#">Museums</a></li>
    18.             </ul>
    19.         </div>
    20.     </div>
          What i am trying to achieve is to put url  like this 

    1. <li><a href="getdata.php?id=1">Pilgrim Centres</a></li> 
    1. <!-- Second page -->
    2. <div data-role="page" data-theme="a" id="page2">
    3.         <div data-role="header"   data-iconpos="left">
    4.             <h1>Home title</h1>
    5.         </div>
    6.         <div data-role="content">
    7.             <p> {Title Here} </p>
    8.             <div class="ui-grid-solo">
    9.                 <div class="ui-block-a"> { Image here }</div>
    10.             </div>
    11.             <div class="ui-grid-b">
    12.                 <div class="ui-block-a"><a href="#" data-role="button">Map</a></div>
    13.                 <div class="ui-block-b"><a href="#" data-role="button">Visit</a></div>
    14.                 <div class="ui-block-c"><a href="#" data-role="button">Share</a></div>
    15.             </div>
    16.         </div>
    17.     </div>
    Every list item need to fetch different data based on a primary key. How can use the ajax call to fetch data from server on list item click. 

    Someone please suggest me best method to do this type of application ; its a common need for the app.