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.

    2. <!-- First page -->
    3. <div data-role="page" data-theme="c" id="home-page">
    4.         <div data-role="header"   data-iconpos="left">
    5.             <h1>Visit Kerala</h1>
    6.             <a href="#link" data-role="button" data-icon="home" data-iconpos="notext">Home</a>
    7.         </div>
    8.             
    9.         <div data-role="content" data-content-theme="a">
    10.             <ul data-role="listview" data-theme="b" id="indexList">
    11.                 <li><a href="#">Pilgrim Centres</a></li>
    12.                 <li><a href="#">Waterfalls</a></li>
    13.                 <li><a href="#">Wildlife</a></li>
    14.                 <li><a href="#">Beaches</a></li>
    15.                 <li><a href="#">Houseboats</a></li>
    16.                 <li><a href="#">Backwaters</a></li>
    17.                 <li><a href="#">Hills</a></li>
    18.                 <li><a href="#">Museums</a></li>
    19.             </ul>
    20.         </div>
    21.     </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> 
    2. <!-- Second page -->
    4. <div data-role="page" data-theme="a" id="page2">
    5.         <div data-role="header"   data-iconpos="left">
    6.             <h1>Home title</h1>
    7.         </div>
    8.         <div data-role="content">
    9.             <p> {Title Here} </p>
    10.             <div class="ui-grid-solo">
    11.                 <div class="ui-block-a"> { Image here }</div>
    12.             </div>
    13.             <div class="ui-grid-b">
    14.                 <div class="ui-block-a"><a href="#" data-role="button">Map</a></div>
    15.                 <div class="ui-block-b"><a href="#" data-role="button">Visit</a></div>
    16.                 <div class="ui-block-c"><a href="#" data-role="button">Share</a></div>
    17.             </div>
    18.         </div>
    19.     </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.

    Thanks
    Kiran.