2012-01-12 7 views
0

Я использую PhoneGap с JSON .Здесь я получил ошибку
индекс/htmlКак исправить эту программу с помощью PhoneGap с JSON

<!DOCTYPE HTML> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> 

    <script src="phonegap-1.2.0.js"></script> 
    <script src="js/jquery-1.5.min.js"></script> 
    <script src="js/load-json.js"></script> 

    <script> 
     function onBodyLoad() {  
      document.addEventListener("deviceready",onDeviceReady,false); 
     } 


    </script> 

</head> 
<body onload="onBodyLoad()"> 
    <div id="output"></div> 
</body> 
</html> 

Json.js 



$(document).ready(function(){ 
    $(document).bind('deviceready', function(){ 
     var output = $('#output'); 

     $.ajax({ 
      url: 'http:192.168.1.3:8000/index', 
      dataType: 'jsonp', 
      jsonp: 'jsoncallback', 
      timeout: 5000, 
      success: function(data, status){ 
       $.each(data, function(i,item){ 
        var landmark = '<h1>'+item.name+'</h1>' 
        + '<p>'+item.latitude+'<br>' 
        + item.longitude+'</p>'; 

        output.append(landmark); 
       }); 
      }, 
      error: function(){ 
       output.text('There was an error loading the data.'); 
      } 
     }); 
    }); 
}); 



01-12 15:08:52.050: I/System.out(338): loadUrl(file:///android_asset/www/index.html) 
    01-12 15:08:52.050: I/System.out(338): url=file:///android_asset/www/index.html baseUrl=file:///android_asset/www 
    01-12 15:08:52.230: W/System.err(338): java.net.SocketException: Permission denied 
    01-12 15:08:52.230: W/System.err(338): at org.apache.harmony.luni.platform.OSNetworkSystem.socket(Native Method) 
    01-12 15:08:52.230: W/System.err(338): at dalvik.system.BlockGuard$WrappedNetworkSystem.socket(BlockGuard.java:335) 
    01-12 15:08:52.230: W/System.err(338): at org.apache.harmony.luni.net.PlainSocketImpl.create(PlainSocketImpl.java:216) 
    01-12 15:08:52.230: W/System.err(338): at org.apache.harmony.luni.net.PlainServerSocketImpl.create(PlainServerSocketImpl.java:40) 
    01-12 15:08:52.240: W/System.err(338): at java.net.ServerSocket.<init>(ServerSocket.java:120) 
    01-12 15:08:52.240: W/System.err(338): at java.net.ServerSocket.<init>(ServerSocket.java:74) 
    01-12 15:08:52.240: W/System.err(338): at com.phonegap.CallbackServer.run(CallbackServer.java:177) 
    01-12 15:08:52.240: W/System.err(338): at java.lang.Thread.run(Thread.java:1019) 
    01-12 15:08:53.299: D/szipinf(338): Initializing inflate state 
    01-12 15:08:53.299: D/szipinf(338): Initializing zlib to inflate 
    01-12 15:08:53.349: D/szipinf(338): Initializing inflate state 
    01-12 15:08:53.349: D/szipinf(338): Initializing zlib to inflate 
    01-12 15:08:54.819: D/PhoneGapLog(338): file:///android_asset/www/index.html: Line 13 : ReferenceError: Can't find variable: onDeviceReady 
    01-12 15:08:54.819: E/Web Console(338): ReferenceError: Can't find variable: onDeviceReady at file:///android_asset/www/index.html:13 
    01-12 15:09:15.029: D/dalvikvm(338): GC_CONCURRENT freed 361K, 52% free 2806K/5767K, external 884K/1038K, paused 6ms+4ms 
    01-12 15:09:45.860: I/System.out(377): loadUrl(file:///android_asset/www/index.html) 
    01-12 15:09:45.909: I/System.out(377): url=file:///android_asset/www/index.html baseUrl=file:///android_asset/www 
    01-12 15:09:46.299: W/System.err(377): java.net.SocketException: Permission denied 
    01-12 15:09:46.299: W/System.err(377): at org.apache.harmony.luni.platform.OSNetworkSystem.socket(Native Method) 
    01-12 15:09:46.299: W/System.err(377): at dalvik.system.BlockGuard$WrappedNetworkSystem.socket(BlockGuard.java:335) 
    01-12 15:09:46.299: W/System.err(377): at org.apache.harmony.luni.net.PlainSocketImpl.create(PlainSocketImpl.java:216) 
    01-12 15:09:46.299: W/System.err(377): at org.apache.harmony.luni.net.PlainServerSocketImpl.create(PlainServerSocketImpl.java:40) 
    01-12 15:09:46.299: W/System.err(377): at java.net.ServerSocket.<init>(ServerSocket.java:120) 
    01-12 15:09:46.299: W/System.err(377): at java.net.ServerSocket.<init>(ServerSocket.java:74) 
    01-12 15:09:46.299: W/System.err(377): at com.phonegap.CallbackServer.run(CallbackServer.java:177) 
    01-12 15:09:46.299: W/System.err(377): at java.lang.Thread.run(Thread.java:1019) 
    01-12 15:09:46.849: D/szipinf(377): Initializing inflate state 
    01-12 15:09:46.849: D/szipinf(377): Initializing zlib to inflate 
    01-12 15:09:46.869: D/szipinf(377): Initializing inflate state 
    01-12 15:09:46.869: D/szipinf(377): Initializing zlib to inflate 
    01-12 15:09:48.100: D/PhoneGapLog(377): file:///android_asset/www/index.html: Line 13 : ReferenceError: Can't find variable: onDeviceReady 
    01-12 15:09:48.100: E/Web Console(377): ReferenceError: Can't find variable: onDeviceReady at file:///android_asset/www/index.html:13 
    01-12 15:10:10.170: I/System.out(416): loadUrl(file:///android_asset/www/index.html) 
    01-12 15:10:10.249: I/System.out(416): url=file:///android_asset/www/index.html baseUrl=file:///android_asset/www 
    01-12 15:10:10.559: W/System.err(416): java.net.SocketException: Permission denied 
    01-12 15:10:10.559: W/System.err(416): at org.apache.harmony.luni.platform.OSNetworkSystem.socket(Native Method) 
    01-12 15:10:10.559: W/System.err(416): at dalvik.system.BlockGuard$WrappedNetworkSystem.socket(BlockGuard.java:335) 
    01-12 15:10:10.569: W/System.err(416): at org.apache.harmony.luni.net.PlainSocketImpl.create(PlainSocketImpl.java:216) 
    01-12 15:10:10.569: W/System.err(416): at org.apache.harmony.luni.net.PlainServerSocketImpl.create(PlainServerSocketImpl.java:40) 
    01-12 15:10:10.569: W/System.err(416): at java.net.ServerSocket.<init>(ServerSocket.java:120) 
    01-12 15:10:10.569: W/System.err(416): at java.net.ServerSocket.<init>(ServerSocket.java:74) 
    01-12 15:10:10.569: W/System.err(416): at com.phonegap.CallbackServer.run(CallbackServer.java:177) 
    01-12 15:10:10.569: W/System.err(416): at java.lang.Thread.run(Thread.java:1019) 
    01-12 15:10:11.080: D/szipinf(416): Initializing inflate state 
    01-12 15:10:11.080: D/szipinf(416): Initializing zlib to inflate 
    01-12 15:10:11.100: D/szipinf(416): Initializing inflate state 
    01-12 15:10:11.100: D/szipinf(416): Initializing zlib to inflate 
    01-12 15:10:12.359: D/PhoneGapLog(416): file:///android_asset/www/index.html: Line 13 : ReferenceError: Can't find variable: onDeviceReady 
    01-12 15:10:12.359: E/Web Console(416): ReferenceError: Can't find variable: onDeviceReady at file:///android_asset/www/index.html:13 
    01-12 15:10:32.759: D/dalvikvm(416): GC_CONCURRENT freed 362K, 52% free 2806K/5767K, external 884K/1038K, paused 6ms+4ms 
    01-12 15:11:42.329: D/dalvikvm(416): GC_CONCURRENT freed 489K, 54% free 2738K/5895K, external 884K/1038K, paused 6ms+3ms 
    01-12 15:12:45.579: D/dalvikvm(416): GC_CONCURRENT freed 426K, 55% free 2696K/5895K, external 884K/1038K, paused 6ms+3ms 

ответ

0

Хорошо, вторая проблема в том, что вы недопонимаете jsonp. Wikipedia гласит:

Запросы на JSONP не запрашивают JSON, а произвольный код JavaScript. Они оцениваются с помощью интерпретатора JavaScript, а не обрабатываются парсером JSON .

Если вы хотите использовать success и error методы, вы должны лучше использовать прямые json как DATATYPE. Вот очень простой пример (обратите внимание, что не будет работать с IE, поскольку он имеет console.log в коде - если вы используете IE, просто удалите эти строки):

<html> 
    <head> 
     <script src="js/jquery.js" ></script> 
     <script language="javascript"> 
     $(function() { 
     var output = $('#output'); 

     $.ajax({ 
       url: "test.json", 
       timeout: 5000, 
       dataType: "json", 
       success: function(data, status){ 
        $.each(data, function(i,item){ 
         var landmark = '<h1>'+item.name+'</h1>' 
         + '<p>'+item.latitude+'<br>' 
         + item.longitude+'</p>'; 

         output.append(landmark); 
        }); 
       }, 
       error: function(err, textStatus, errorThrown) { 
       output.text("There was an error [" + textStatus + "] loading the data."); 
       console.log(err); 
       console.log(errorThrown); 
       }  
     }); 
     }); 
     </script> 
    </head> 
    <body> 
    <div id="output"></div> 
    </body> 
    </html> 

и test.json на моем сервере выглядит как это:

[ 
    { "name": "First", "latitude": 100, "longitude": 120 }, 
    { "name": "Second", "latitude": -23, "longitude": -20 }, 
    { "name": "Third", "latitude": 40, "longitude": 120 } 
    ] 

Надежда, что помогает, Крэйг

+0

где находится test.json –

+0

где я должен найти test.json –

+0

В этом примере test.json находится в том же каталоге, что и файл test.html. Следовательно, URL-адрес просто «test.json». – craigmj

0

Ваша проблема в списке ошибок вы предоставляете:

01-12 15:10:12.359: E/Web Console(416): ReferenceError: Can't find variable: 
     onDeviceReady at file:///android_asset/www/index.html:13 

PhoneGap рекомендует несколько другую модель стандарта DOM < нагрузка на нагрузку/>. Вы привязаны к устройству готовому событию с:

document.addEventListener("deviceready",onDeviceReady,false); 

Теперь вам нужно реализовать функцию «onDeviceReady», например, между < сценарием > тегами:

function onDeviceReady() { 
    alert("I'm ready!"); 
} 

Это устранит первая проблема ;-) вы можете иметь другой:

01-12 15:08:52.230: W/System.err(338): java.net.SocketException: 
     Permission denied 

Это будет, потому что страница вы загружаете пытается достичь URL на другой серв er (http: 192.168.1.3: 8000/index): это тот же адрес, с которого вы обслуживаете вашу страницу html?

+0

нет .. это мой веб-адрес http://samcroft.co.uk/demos/updated-load-data-into-phonegap/landmarks.php –

+0

Я получаю этот пример с этого сайта ..http: // samcroft.co.uk/2011/updated-loading-data-in-phonegap-using-jquery-1-5/ –

+0

вместо этого (http: 192.168.1.3: 8000/index): я помещаю ссылку на другой адрес веб-сайта http: //www.samcroft.co.uk/demos/updated-load-data-into-phonegap/landmark.php.когда я запускаю программу, эмулятор Android показывает пустой и белый экран –

0

разница между DATATYPE json и jsonp что json возвратит JSon данные, которые будут анализироваться на JSON.parse пока jsonp просто загрузит и выполнит скрипт javascript из заданного URL (хотя он также выполнит метод успеха, если он у вас есть.)

При использовании JSONP, следовательно, данные Принести с сервера будет выглядеть следующим образом (я называю его testp.js):

jsonpCallback(
    [ 
     { "name": "First", "latitude": 100, "longitude": 120 }, 
     { "name": "Second", "latitude": -23, "longitude": -20 }, 
     { "name": "Third", "latitude": 40, "longitude": 120 } 
    ] 
); 

Мои testp.html затем:

<html> 
    <head> 
     <script src="js/jquery.js" ></script> 
     <script language="javascript"> 
     $(function() { 
     var output = $('#output'); 

     $.ajax({ 
       url: "testp.js", 
       timeout: 5000, 
       dataType: "jsonp", 
       jsonpCallback: 'jsonpCallback', 
       success: function(data, textStatus, jqXHR) { 
       alert('In success method'); 
       }, 
       error: function(err, textStatus, errorThrown){ 
       output.text("There was an error [" + textStatus + "] loading the data."); 
       console.log(err); 
       console.log(errorThrown); 
       }  
     }); 
     }); 

     function jsonpCallback(data) { 
     var output = $('#output'); 
     $.each(data, function(i,item){ 
      var landmark = '<h1>'+item.name+'</h1>' 
      + '<p>'+item.latitude+'<br>' 
      + item.longitude+'</p>'; 

      output.append(landmark); 
     }); 
    } 
     </script> 
    </head> 
    <body> 
    <div id="output"></div> 
    </body> 
    </html> 

Существует два важных момента:

  1. При использовании jsonp я предоставляю имя th e, которую я хочу вызвать с извлеченными данными. jQuery помещает это значение в параметр как часть запроса, поэтому запрос браузера составляет http://localhost/test/testp.js?callback=jsonpCallback&_=1326369112478. Очевидно, что testp.js не должен жестко кодировать этот обратный вызов, а скорее использовать предоставленный параметр для вызова соответствующего метода обратного вызова.

  2. В то время как моя функция jsonpCallback вызывается, также метод success. Логически, однако, подходящее место для вашего кода обработки находится в методе jsonpCallback, в моем примере.

Преимущество jsonp над json что JSONP может запросить сценарий с другого сервера от одного хостинг-страницу, делая запрос. Это позволяет выполнять межсайтовый скриптинг.