phonegap 应用程序中的 getJSON 不起作用答案

【问题标题】：getJSON in phonegap application not workingphonegap 应用程序中的 getJSON 不起作用
【发布时间】：2014-01-17 16:33:17
【问题描述】：

我浏览了有关此问题的旧帖子，但没有找到解决问题的方法。

我的计算机上有 2 个 REST 服务，1 个用于登录，2 个用于发送列表项。

我可以使用登录网络服务进行连接和登录。我的第二个 Web 服务在登录后被调用，它以以下形式提供 JSON 数据..

[{"oid":101,"summary":"这是我的第一个订单"},{"oid":102,"summary":"这是第二个订单"}]

我想解析这个 JSON 字符串并创建一个“oid”列表，然后如果我点击第一项，我应该会在新页面上看到“摘要”。当我点击后退按钮时，我想再次调用该服务以刷新列表。

这是我尝试过的代码。

<script>
    $.getJSON('http://192.168.2.36:8080/phoneservlet/getOrders', function(data){
            var output = '';


    $.each(data, function(index, value){

    //add each value to the output buffer (we also have access to the other properties of this object: id, start, and end)
    output += '<li>'+ value.oid +'</li>';
    });

    //now append the buffered output to the listview and either refresh the listview or create it (meaning have jQuery Mobile style the list)
    $('#your-orders').append(output).listview('refresh');//or if the listview has yet to be initialized, use `.trigger('create');` instead of `.listview('refresh');`
    });

    </script>

这是for列表

<div data-role="page" id="currentorders">
<div data-role="content" id="data">
<ul data-role="listview" id="your-orders" data-divider-theme="b" data-inset="true">List of Orders</ul>
</div>

问题是我的列表没有被填充。我看到一个空列表，只有我的列表标题是“订单列表”

我是 jquery 的新手，所以我还没有弄清楚如何在新页面上显示摘要..

【问题讨论】：

标签： json web-services jquery-mobile web cordova

【解决方案1】：

您无法通过 PhoneGap 应用程序连接到 IP 地址，因为这些地址无法列入白名单，您只能向配置中列入白名单的域发出 CORS 请求：http://docs.phonegap.com/en/1.9.0/guide_whitelist_index.md.html

【讨论】：

【解决方案2】：

我认为您可能错过了 config.xml 文件中的以下访问规则：

<access origin="*" />

【讨论】：

【解决方案3】：

1) 对于第一个问题，您需要检查 get json url

2) 第二期在新页面上显示摘要

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="currentorders">
    <div data-role="header">
        <h1>Orders</h1>
    </div>
    <div data-role="content">
      <ul data-role="listview" id="your-orders" data-divider-theme="b" data-inset="true"></ul>
    </div>
</div> 
<div data-role="page" id="summary">
    <div data-role="header">
        <a href="" data-rel="back" id="back" data-transition="slide" data-direction="reverse">Back</a>
        <h1>Summary</h1>
    </div>
    <div data-role="content" id="content">         
    </div>
</div> 
</body>
<script>
$('#currentorders').live("pageshow", function(){
    // Here obj get using $.getJSON function, I have done direct using your json object only for example 
    var obj = [{"oid":101,"summary":"this is my first order"},{"oid":102,"summary":"this is second order"}];
    var list = "";
    $.each(obj, function(key, value){            
        list += '<li class="row"><a href=""  data-role="none" data-title="'+value.summary+'" data-transition="slide">'+value.oid+'</a></li>';
    })
    $('#your-orders').html(list).trigger('create');
    $('#your-orders').listview('refresh')
})

$('#currentorders li a').live("click",function(){
    var content = $(this).attr("data-title");
    $("#summary #content").html(content);
    $.mobile.changePage( "#summary", { transition: "slide", changeHash: false });
}) 

$('#summary #back').live("click",function(){
    $.mobile.changePage( "#currentorders", { transition: "slide", reverse: true, changeHash: false });
}) 
</script>
</html>

【讨论】：