最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

php - Loading JSON using jQuery Mobile & Phonegap? - Stack Overflow

programmeradmin2浏览0评论

Basically I have a php script located on a sever that generates a JSON file listing places from a mysql database. Using jQuery Mobile I am developing an application to display these places. My code works in Chrome & Safari, however when I port it over to Phonegap it doesn't work. I have searched all over the internet but can't find an answer :(.

The php file for generating JSON (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) . ');';
?>

My Javascript file located within my app (Loads JSON and displays it):

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


function getPlaces() {

    var output = $('#placeList');

    $.ajax({
        url: '.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.');
        }
    });

}

The HTML looks like this:

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

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

This code works in Chrome & Safari, however when run in the xCode simulator with Phonegap it doesn't load the JSON.

Any help would be much appreciated :)

Basically I have a php script located on a sever that generates a JSON file listing places from a mysql database. Using jQuery Mobile I am developing an application to display these places. My code works in Chrome & Safari, however when I port it over to Phonegap it doesn't work. I have searched all over the internet but can't find an answer :(.

The php file for generating JSON (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) . ');';
?>

My Javascript file located within my app (Loads JSON and displays it):

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


function getPlaces() {

    var output = $('#placeList');

    $.ajax({
        url: 'http://www.mysite./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.');
        }
    });

}

The HTML looks like this:

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

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

This code works in Chrome & Safari, however when run in the xCode simulator with Phonegap it doesn't load the JSON.

Any help would be much appreciated :)

Share Improve this question edited Jan 19, 2012 at 12:56 Per Quested Aronsson 12.1k8 gold badges57 silver badges77 bronze badges asked Oct 25, 2011 at 14:37 DannyDanny 1,0034 gold badges21 silver badges39 bronze badges 0
Add a ment  | 

2 Answers 2

Reset to default 5

I don't think the problem has anything to do with the server code (PHP), unless you are producing invalid JSON. The question should be tagged with JavaScript rather than PHP. Anyway, there is an excellent article describing a very similar type of application. It even includes sample code. Have a look:

Sample Application using jQuery Mobile and PhoneGap

Dude, That's server side script it won't run unless its hosted on a server with those languages implemented. I'm running into a similar problemn One suggestion was to implmented the AJAX to fetch the data from a php site an return the data. I'm look'n to just forward the whole page over too a Safari webview window (which you have to set in phonegap permissions). Problem there is I get all the Safari chrome on the top and bottom trying to figure out how to trim that so I don't have to recode with AJAX to pull PHP data server side.

发布评论

评论列表(0)

  1. 暂无评论