从Web API获取JSON数据后,在页面加载时动态添加新的HTML元素

时间:2012-06-19 21:17:11

标签: javascript html json cordova

我正在使用Phonegap / Apache Cordova构建混合Android应用程序。我的应用程序应该从我的web api获取数据。我正在使用JSON将数据提供给APP。所以我得到了以下代码:

function init() { 
document.addEventListener('deviceready', onDeviceReady, false);
var url = "http://23.21.128.153:3000/regions.json";var jsonresults;
    $.getJSON(url,function(data){
        jsonresults = data;
          $.each(jsonresults, function(i,v){
          $('#main-content').append('<li>'+jsonresults[i].name+'</li>');
        });
    });
}

并且在html的主体上我有一个名为main-content的div。 Everythings在Eclipse浏览器中运行良好,但Android模拟器无效。不确定是否有其他方法可以使用JSON从Web API中提取数据,并在获取数据后以动态方式创建HMTL元素。

https://gist.github.com/2956660

1 个答案:

答案 0 :(得分:1)

从web api获取数据非常容易。试试这个代码。它将解决您的问题,

通过jquery mobile非常容易。你可以使用普通的Ajax和一些JSON来完成你的工作。我用php服务器完成了。这里是示例代码,

通过jquery向服务器发送请求。

$.ajax({
          url: <your Server URL>,
          dataType: 'jsonp',
          jsonp: 'jsoncallback',
          timeout: 5000,
          success: function(data, status){
                             /*Process your response here*/

      jsonresults = data;
      $.each(jsonresults, function(i,v){
      $('#main-content').append('<li>'+jsonresults[i].name+'</li>');
    });

 $.mobile.changePage($('#index')); /*page navigate the particular where data shown*/
 $("#index").trigger("pagecreate"); /*This is like a page refresh and load the injected data in jquery*/
                        }
       });

在php服务器文件中,

<?php
$data="I am sending response to you";

/*you have to mention this callback compulsory*/

echo $_GET['jsoncallback'] . '(' . json_encode($data) . ');';
?>