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

来源：互联网发布：隐秘录像知乎编辑：程序博客网时间：2024/06/07 19:26

获得的步骤，主要和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：

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

dom：

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

如有问题可以来我qq群找我（224711028）

效果如下：