使用ajax在本地浏览器中加载JSON,但不在PhoneGap应用程序中加载

时间:2014-07-23 11:30:30

标签: javascript ajax json phonegap-build

在我的浏览器中加载外部JSON数据(在本地运行)时,它会显示请求的数据。在PhoneGap的基于云的构建服务中使用它时,页面加载但没有JSON数据。 有没有人有解决方案让它在PhoneGap应用程序(iOS和Android)中运行?提前致谢! 下面是a.html的代码

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
  <link rel="stylesheet" href="css/jquery.mobile-1.4.3.min.css">
  <script src="js/jquery-1.9.1.min.js"></script>

<script type="text/javascript">
$(document).bind("mobileinit", function() {
    $.support.cors = true;
    $.mobile.allowCrossDomainPages = true;
});
</script>

  <script src="js/jquery.mobile-1.4.3.min.js"></script>
  <script src="js/menu-simple.js"></script>
<script type="text/javascript">

    alert('LOADING...');  

$(document).ready(function() {

    alert('READY!');

$.ajax({
            url: "http://www.example.org/stand.php",
            dataType: "jsonp",
            jsonp: 'jsoncallback',
            success: function(parsed_json) {
               alert("YEP!");

               for (var i in parsed_json)
                {
                  var row = parsed_json[i];          

                    var nr = row['nr'];              //get id
                    var team = row['team'];           //get name
                    var played = row['played'];
                    $('#info').append("<b>nr: </b>"+nr+"<b> team: </b>"+team+"<b> played: </b>"+played)
                              .append("<hr />");
                }

               //var loc = parsed_json[1];
               //var weather = "team: " + parsed_json.team + "<br />";
               //weather += "played: " + parsed_json.played + " ";
               //weather += "-" + parsed_json.wins + " wins";
               //$("#info").html(weather);
           }    
    });
});
</script>

</head>
<body>

<div class="headerHolder"><div class="logo"></div></div>
<div style="width:100%; height:20px; float:left; margin-bottom:1px;"></div>

<div id="info" style="width:100%; padding-bottom:5px;"></div>

<div style="clear:both;"></div>

</body>
</html>

下面是stand.php的代码:

<?php
header('Access-Control-Allow-Origin: *');//for local browser test

$_POST['team'] = 'E3';
$doc = new DOMDocument();
$url = 'http://www.example.org/clubs/teams/embed/bbgz35e/team/'.$_POST['team'].'?layout=stand&stand=1&format=xml';

if (!$doc->load($url)) {     
exit('Kon stand niet inladen!');
}

$xpath = new DOMXPath($doc);

//$poulenaam = $xpath->query('/div[@id="teampagina"]/h3')->item(0)->nodeValue;
//
//$nodes = $xpath->query('//tbody/tr/td[@class="wins"]');
//
//$doelpunten = 0;
//foreach ($nodes as $node) {
//  $doelpunten += (int)$node->nodeValue;
//
//}
//
//echo "Aantal doelpunten in de poule `{$poulenaam}`: {$doelpunten}";


$tableRows = $xpath->query('//tbody/tr');
$x=1;
$stand = Array();

foreach ($tableRows as $row) {
$classes = Array();
    $cells = $xpath->query('td/@class', $row);
    foreach ($cells as $cell) {
        //echo ' class =  ';
        //var_export($cell->nodeValue);
        $classes[] = $cell->nodeValue;
    }$x++;
}
array_unshift($classes, "phoney");
unset($classes[0]);
//print_r($classes);
//echo "<br>\n";

$z = 1;
foreach ($tableRows as $row) {
    $cells = $xpath->query('td', $row);
$i=1;

    foreach ($cells as $cell) {
        //echo $z.'value'.$i.' =  ';
        //var_export($cell->nodeValue);
        //echo "<br>\n";
        $stand[$z][$classes[$i]] = $cell->nodeValue;
    $i++;   
    } $z++;
}
//array_unshift($stand, "phoney");
//unset($stand[0]);
//print_r($stand);
echo json_encode($stand);

?>

在config.xml的代码下面:

<!-- config.xml reference: https://build.phonegap.com/docs/config-xml -->
<widget xmlns     = "http://www.w3.org/ns/widgets"
        xmlns:gap = "http://phonegap.com/ns/1.0"
        id        = "com.phonegap.hello-world"
        version   = "1.0.0">

    <!-- versionCode is optional and Android only -->       

    <name>Example</name>

    <description>
       Example app
    </description>

    <author href="http://www.example.org" email="support@example.org">
        Example
    </author>

    <!-- current version of PhoneGap -->
    <preference name="phonegap-version" value="3.3.0" />

    <!--
        Enable individual API permissions here.
        The "device" permission is required for the 'deviceready' event.
    -->
    <gap:plugin name="org.apache.cordova.device" />

    <!--
        If you do not want any permissions to be added to your app, add the
        following tag to your config.xml; you will still have the INTERNET
        permission on your app, which PhoneGap requires.
    -->
    <preference name="permissions"                value="none"/>

    <!-- Customize your app and platform with the preference element. -->
    <preference name="orientation"                value="default" />        <!-- all: default means both landscape and portrait are enabled -->
    <preference name="target-device"              value="universal" />      <!-- all: possible values handset, tablet, or universal -->
    <preference name="fullscreen"                 value="true" />           <!-- all: hides the status bar at the top of the screen -->
    <preference name="webviewbounce"              value="true" />           <!-- ios: control whether the screen 'bounces' when scrolled beyond the top -->
    <preference name="prerendered-icon"           value="true" />           <!-- ios: if icon is prerendered, iOS will not apply it's gloss to the app's icon on the user's home screen -->
    <preference name="stay-in-webview"            value="false" />          <!-- ios: external links should open in the default browser, 'true' would use the webview the app lives in -->
    <preference name="ios-statusbarstyle"         value="black-opaque" />   <!-- ios: black-translucent will appear black because the PhoneGap webview doesn't go beneath the status bar -->
    <preference name="detect-data-types"          value="true" />           <!-- ios: controls whether data types (such as phone no. and dates) are automatically turned into links by the system -->
    <preference name="exit-on-suspend"            value="false" />          <!-- ios: if set to true, app will terminate when home button is pressed -->
    <preference name="show-splash-screen-spinner" value="true" />           <!-- ios: if set to false, the spinner won't appear on the splash screen during app loading -->
    <preference name="auto-hide-splash-screen"    value="true" />           <!-- ios: if set to false, the splash screen must be hidden using a JavaScript API -->
    <preference name="disable-cursor"             value="false" />          <!-- blackberry: prevents a mouse-icon/cursor from being displayed on the app -->
    <preference name="android-minSdkVersion"      value="7" />              <!-- android: MIN SDK version supported on the target device. MAX version is blank by default. -->
    <preference name="android-installLocation"    value="auto" />           <!-- android: app install location. 'auto' will choose. 'internalOnly' is device memory. 'preferExternal' is SDCard. -->

    <!-- Plugins can also be added here. -->
    <!--
        <gap:plugin name="Example" />
        A list of available plugins are available at https://build.phonegap.com/docs/plugins
    -->

    <!-- Define app icon for each platform. -->
    <icon src="icon.png" />
    <icon src="res/icon/android/icon-36-ldpi.png"   gap:platform="android"    gap:density="ldpi" />
    <icon src="res/icon/android/icon-48-mdpi.png"   gap:platform="android"    gap:density="mdpi" />
    <icon src="res/icon/android/icon-72-hdpi.png"   gap:platform="android"    gap:density="hdpi" />
    <icon src="res/icon/android/icon-96-xhdpi.png"  gap:platform="android"    gap:density="xhdpi" />
    <icon src="res/icon/ios/icon-57.png"            gap:platform="ios"        width="57" height="57" />
    <icon src="res/icon/ios/icon-72.png"            gap:platform="ios"        width="72" height="72" />
    <icon src="res/icon/ios/icon-57-2x.png"         gap:platform="ios"        width="114" height="114" />
    <icon src="res/icon/ios/icon-72-2x.png"         gap:platform="ios"        width="144" height="144" />


    <!-- Define app splash screen for each platform. -->
    <gap:splash src="res/screen/android/screen-ldpi-portrait.png"  gap:platform="android" gap:density="ldpi" />
    <gap:splash src="res/screen/android/screen-mdpi-portrait.png"  gap:platform="android" gap:density="mdpi" />
    <gap:splash src="res/screen/android/screen-hdpi-portrait.png"  gap:platform="android" gap:density="hdpi" />
    <gap:splash src="res/screen/android/screen-xhdpi-portrait.png" gap:platform="android" gap:density="xhdpi" />
    <gap:splash src="res/screen/ios/screen-iphone-portrait.png"    gap:platform="ios"     width="320" height="480" />
    <gap:splash src="res/screen/ios/screen-iphone-portrait-2x.png" gap:platform="ios"     width="640" height="960" />
    <gap:splash src="res/screen/ios/screen-ipad-portrait.png"      gap:platform="ios"     width="768" height="1024" />
    <gap:splash src="res/screen/ios/screen-ipad-landscape.png"     gap:platform="ios"     width="1024" height="768" />

    <!--
        Define access to external domains.

        <access />            - a blank access tag denies access to all external resources.
        <access origin="*" /> - a wildcard access tag allows access to all external resource.

        Otherwise, you can specify specific domains:
    -->
        <access origin="*" />
        <access origin="http://www.example.org" />
<!-- allow all pages, use for development -->

    <!--
        <access origin="http://phonegap.com" />                    - allow any secure requests to http://phonegap.com/
        <access origin="http://phonegap.com" subdomains="true" />  - same as above, but including subdomains, such as http://build.phonegap.com/
        <access origin="http://phonegap.com" browserOnly="true" /> - only allows http://phonegap.com to be opened by the child browser.
    -->

</widget>

2 个答案:

答案 0 :(得分:0)

为ajax选项提供错误功能,以了解您的请求无法通过的原因。

error: function(jqXHR, textStatus, errorThrown) {
    alert('An error', jqXHR, textStatus, errorThrown );
}

答案 1 :(得分:0)

它是固定的。我不得不将javacripts放在body-tages之间而不是head-tag(在第二个html页面中)。 jQueryMobile仅在第一页中加载head-tag。接下来的页面只会加载body标签。