JQMobile(Jquery一样能用)中如何获得远程的json数据并绑定

获得的步骤，主要和jquery类似，

1.首先使用$.ajax的方法发送参数，

2.传回json数据后，将数据与模板一一mapping

3.最后将返回的数据与dom绑定即可

代码如下：

request的方法：

        $(document).ready(function(){
                	$.ajax({
                                url: 'http://localhost:3458/EmiteDataService/Nodes?userName=admin&userDomain=admin&status=0',
                                dataType: 'jsonp',
                                success: function( jsonData ) {
                                  //alert(jsonData);
                                   var  tempaaa = $( '#tempaaa' ).html();
                                    var reportHtml="";
                                    $(function() {
                                        if (jsonData) {

                                            for (var report in jsonData)
                                            {
                                                //alert(jsonData[report].MetricName);
                                                reportHtml += tempaaa
                                                    .replace( /\{MetricName\}/g, jsonData[report].MetricName)
                                                    .replace( /\{HostName\}/g, jsonData[report].HostName );
                                            }

                                           return $('#navListContent')
                                            .html( reportHtml ).listview();




                                        } else {
                                            //renderErrorMessage( 'Fehler', 'Verkehrs-Daten konnten nicht geladen werden.' );
                                           alert("error");
                                        }
                                    });
                                },
                                error: function( XMLHttpRequest, textStatus, errorThrown ) {
                                    //renderErrorMessage( 'Fehler', textStatus );
                                    alert("error");
                                }
                            });



        });

<script id="tempaaa" type="text/html-template">
		<li>
			<a href="#" >
                <div>{MetricName}</div>
                <div>{HostName}</div>
            </a>
		</li>
	</script>

<div data-role="content" id="navListContent">
      		<ul data-role="listview" id="navList">
            <li>About
              <ul>
                <li><a href="#aboutus" data-panel="main">About Us</a></li>
                <li><a href="#aboutsv" data-panel="main">About Splitview</a></li>
              </ul>
            </li>
            <li>Features
              <ul>
                  <li><a href="#panels" data-panel="main">Panels</a></li>
                  <li><a href="#orientation" data-panel="main">Orientation</a></li>
                  <li><a href="#scroll" data-panel="main">Scroll</a></li>
                  <li><a href="#context" data-panel="main">Context Pages</a></li>
              </ul>
            </li>
            <li><a href="#credits" data-panel="main">Credits</a></li>
            <li><a href="#source" data-panel="main">Source@Github</a></li>
          </ul>
      	</div><!-- /content -->

效果如下：