使用 jQuery Mobile 和 Phonegap 加载 JSON？答案

【问题标题】：Loading JSON using jQuery Mobile & Phonegap?使用 jQuery Mobile 和 Phonegap 加载 JSON？
【发布时间】：2011-10-25 14:37:24
【问题描述】：

基本上我有一个位于服务器上的 php 脚本，它生成一个 JSON 文件，列出来自 mysql 数据库的位置。使用 jQuery Mobile 我正在开发一个应用程序来显示这些地方。我的代码在 Chrome 和 Safari 中工作，但是当我将它移植到 Phonegap 时它不起作用。我在整个互联网上搜索过，但找不到答案:(。

生成JSON的php文件（json.php）：

<?php
header('Content-type: application/json');


$server = "localhost";
$username = "xxx";
$password = "xxx";
$database = "xxx";

$con = mysql_connect($server, $username, $password) or die ("Could not connect: " . mysql_error());
mysql_select_db($database, $con);

$sql = "SELECT * FROM places ORDER BY name ASC";
$result = mysql_query($sql) or die ("Query error: " . mysql_error());

$records = array();

while($row = mysql_fetch_assoc($result)) {
    $records[] = $row;
}

mysql_close($con);

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

我的 Javascript 文件位于我的应用程序中（加载 JSON 并显示它）：

$('#places').bind('pageinit', function(event) {
    getPlaces();
});


function getPlaces() {

    var output = $('#placeList');

    $.ajax({
        url: 'http://www.mysite.com/json.php',
        dataType: 'jsonp',
        jsonp: 'jsoncallback',
        timeout: 5000,
        success: function(data, status){
            $.each(data, function(i,item){
                var place = '<li><a href="">'+item.name+'<span class="ui-li-count">'
                + item.checkins+'</span></a></li>';

                output.append(place);
            });
            $('#placeList').listview('refresh');
        },
        error: function(){
            output.text('There was an error loading the data.');
        }
    });

}

HTML 如下所示：

<div data-role="content">
            <h3>Places</h3>
            <ul data-role="listview" id="placeList" data-inset="true">

        </ul>
</div><!-- /content -->

此代码可在 Chrome 和 Safari 中运行，但是当在带有 Phonegap 的 xCode 模拟器中运行时，它不会加载 JSON。

任何帮助将不胜感激:)

【问题讨论】：

标签： php javascript json jquery-mobile cordova

【解决方案1】：

我认为问题与服务器代码 (PHP) 没有任何关系，除非您生成的 JSON 无效。该问题应使用 JavaScript 而不是 PHP 进行标记。无论如何，有一篇很棒的文章描述了一种非常相似的应用程序类型。它甚至包括示例代码。看看：

Sample Application using jQuery Mobile and PhoneGap

【讨论】：

【解决方案2】：

老兄，那是服务器端脚本，除非它托管在实施了这些语言的服务器上，否则它不会运行。我遇到了类似的问题一个建议是实现 AJAX 从 php 站点获取数据并返回数据。我希望将整个页面转发到一个 Safari webview 窗口（您必须在 phonegap 权限中设置）。问题是我得到了顶部和底部的所有 Safari 浏览器，试图弄清楚如何修剪它，所以我不必使用 AJAX 重新编码来拉 PHP 数据服务器端。

【讨论】：

看起来像 JQuerry 作为一个库可能会有用。但是，如果您将 .php 文件放入 Xcode 中的 PhoneGap 项目中，它将无法运行。因为就像我说的它的服务器端脚本...但是使用 javascript 来实现 JQuerry 的东西我不太确定这可能会让你愿意。
我假设，查看代码，php 文件在服务器上运行。