您的位置：首页 > Web前端 > JQuery

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

2012-02-20 15:14 375 查看

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

效果如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： json xmlhttprequest report function listview jsonp

相关文章推荐

新的分享

章节导航