使用jQuery Mobile& Loading加载JSON PhoneGap的?

时间:2011-10-25 14:37:25

标签: php javascript json jquery-mobile cordova

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

用于生成JSON(json.php)的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&amp; Safari,但是当使用Phonegap在xCode模拟器中运行时,它不会加载JSON。

非常感谢任何帮助:)

2 个答案:

答案 0 :(得分:5)

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

Sample Application using jQuery Mobile and PhoneGap

答案 1 :(得分:0)

哥们, 这是服务器端脚本,除非托管在实现了这些语言的服务器上,否则它将无法运行。我遇到了类似的问题。一个建议是将AJAX从php站点获取数据并返回数据。我看起来只是将整个页面转发到Safari webview窗口(你必须在phonegap权限中设置)。问题是我在顶部和底部都得到了所有的Safari chrome,试图弄清楚如何修剪它,所以我不需要用AJAX重新编码来拉取PHP数据服务器端。