堆栈内存溢出
  简体   繁体   English

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

[英]Loading JSON with ajax working in local browser, but not in the PhoneGap app

 原文  2014-07-23 11:30:29  3   3    javascript/ ajax/ json/ phonegap-build

问题描述

When loading external JSON-data in my browser (run it locally), it shows the requested data.在我的浏览器中加载外部 JSON 数据（在本地运行）时，它会显示请求的数据。 When using it in the cloud-based build service of PhoneGap, the page loads but without the JSON-data.在 PhoneGap 的基于云的构建服务中使用它时，页面加载但没有 JSON 数据。 Does anyone have the solution to make it work in the PhoneGap app (iOS and Android)?有没有人有解决方案让它在 PhoneGap 应用程序（iOS 和 Android）中工作？ Thanks in advance!提前致谢！ Below de code of a.html下面是 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>

Below de code of the stand.php:下面是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);

?>

Below de code of the config.xml:下面是 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>

3 个解决方案

解决方案1
 0  2014-07-23 11:46:07

Provide error function to ajax options to understand why your request can't pass.为 ajax 选项提供错误功能，以了解您的请求无法通过的原因。

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

解决方案2
 0 已采纳  2014-07-30 13:29:39

It is fixed.它是固定的。 I had to place the javacripts between the body-tages and not in the head-tag (in the second html-page).我必须将 javacripts 放在 body-tags 之间，而不是放在 head-tag 中（在第二个 html 页面中）。 jQueryMobile loads the head-tag only in the first page. jQueryMobile 仅在第一页加载 head-tag。 The next pages only the body-tag will load.接下来的页面只有 body-tag 会加载。

解决方案3
 0  2022-06-08 04:14:13

I had a similar issue.我有一个类似的问题。 Ajax requests were being done on the web browser, but once the app was built and running on my phones, for some reason ajax requests were not working. Ajax 请求是在网络浏览器上完成的，但是一旦应用程序在我的手机上构建并运行，由于某种原因，ajax 请求不起作用。

I solved that issue by adding this to the config.xml file我通过将它添加到 config.xml 文件解决了这个问题

<preference name="AndroidInsecureFileModeEnabled" value="true" />

My php scripts on my hosting have this at the top我主机上的 php 脚本在顶部有这个

header('Access-Control-Allow-Origin: *')

and my meta tag in the index.html is this:我在 index.html 中的元标记是这样的：

<meta http-equiv="Content-Security-Policy" content="default-src *;    img-src * 'self' data: https:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *;    style-src  'self' 'unsafe-inline' *">

Hope this works for anyone in the future!!希望这对将来的任何人都有效！

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 AJAX发布请求可在浏览器中运行，而不是在Phonegap App上运行 - AJAX post request working in browser, not on Phonegap App App浏览器和本地存储中的Phonegap - Phonegap In App Browser and Local Storage Phonegap android ajax调用在浏览器中工作，而不是在移动设备上 - Phonegap android ajax calls working in browser, not on mobile PhoneGap / Cordova 在浏览器中“点击”工作，但在开发者应用程序中不起作用？ - PhoneGap / Cordova “click” working in browser, but not working on Developer App? 在（浏览器）笔记本电脑上工作的phonegap地图应用程序，但在Android手机上不工作 - phonegap map app working on (browser) laptop but not working on Android phone html5必需的验证在浏览器上工作得很好，但在phonegap应用程序上却不能 - html5 required validation working great on browser but not phonegap app 如何在Phonegap应用程序中处理Ajax JSON响应 - How to handle Ajax json response within a phonegap app Phonegap 3.6.3 Ajax无法正常工作 - Phonegap 3.6.3 ajax not working PhoneGap Build：AJAX无法正常工作 - PhoneGap Build: AJAX not working phonegap ajax无法使用值 - phonegap ajax not working with value
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM