[英]Loading JSON with ajax working in local browser, but not in the PhoneGap app
在我的瀏覽器中加載外部 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>
為 ajax 選項提供錯誤功能,以了解您的請求無法通過的原因。
error: function(jqXHR, textStatus, errorThrown) {
alert('An error', jqXHR, textStatus, errorThrown );
}
它是固定的。 我必須將 javacripts 放在 body-tags 之間,而不是放在 head-tag 中(在第二個 html 頁面中)。 jQueryMobile 僅在第一頁加載 head-tag。 接下來的頁面只有 body-tag 會加載。
我有一個類似的問題。 Ajax 請求是在網絡瀏覽器上完成的,但是一旦應用程序在我的手機上構建並運行,由於某種原因,ajax 請求不起作用。
我通過將它添加到 config.xml 文件解決了這個問題
<preference name="AndroidInsecureFileModeEnabled" value="true" />
我主機上的 php 腳本在頂部有這個
header('Access-Control-Allow-Origin: *')
我在 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' *">
希望這對將來的任何人都有效!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.