3

編集：問題がありました。#t01 ID は ajax 成功関数内ではアクセスできないため、何も表示されません。それはjavascript巻き上げと呼ばれるものです。しかし、私はこの問題に取り組む方法を見つけられませんでした。document.getElementById('t01').innerHTML = content を ajax ステートメントの外側に配置すると、undefinedが表示されます

PHP から返された json を HTML に表示することができません。どこが間違っているのかわかりません。

index.html

 <head>
    <title>Device Properties Example</title>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>

    <script type="text/javascript" charset="utf-8">
     document.addEventListener("deviceready", onDeviceReady, false);
     function onDeviceReady() {
     navigator.geolocation.getCurrentPosition(onSuccess, onError);
    }
    function onSuccess(position) {
    var lat,lon,content;
    var element = document.getElementById('geolocation');

        element.innerHTML = 'Latitude: '           + position.coords.latitude + '<br />' +
                            'Longitude: '          + position.coords.longitude  + '<br />' +
                            'Altitude: '           + position.coords.altitude              + '<br />' +
                            'Accuracy: '           + position.coords.accuracy              + '<br />' +
                            'Altitude Accuracy: '  + position.coords.altitudeAccuracy      + '<br />' +
                            'Heading: '            + position.coords.heading               + '<br />' +
                            'Speed: '              + position.coords.speed                 + '<br />' +
                            'Timestamp: '          + position.timestamp                    + '<br />';
    lat= position.coords.latitude;
    lon= position.coords.longitude;
    $(document).ready(function(){
    $.ajax({
    type: 'GET',
    url: "http://geolocation.webatu.com/Radius.php", 
    data:{lat:lat , lon:lon},
    dataType: 'jsonp',
    success: function(response){
    content = "<ul>";
    var parsed = JSON.parse(response);
    for(var i in parsed){
    content += "<li>" + parsed[i].ClassName+" "+ parsed[i].City+"</li>";
    document.getElementById('t01').innerHTML = content;
    }
}
});
});

}
 function onError(error) {
 alert('code: '    + error.code    + '\n' +
       'message: ' + error.message + '\n');
 }
    </script>
    </head>
    <body>
    <p id="geolocation">Finding geolocation...</p>
    <div id="t01"> </div>   </body>

PHP コード

$con=mysqli_connect($mysql_host,$mysql_user,$mysql_password,$mysql_database);
    $lat = $_GET['lat'];
    $lon = $_GET['lon'];
$var= array();
$sql = mysqli_query($con,"//all the query goes here//") or die('Error: ' . mysqli_error($con));
while($row = mysqli_fetch_array($sql))
        {
    $var[]=$row;
    }
echo '{"college":'.json_encode($var).'}';
mysqli_close($con);

JSON レスポンス

'[{"ID":"1","ClassName":"somaiya","City":"mumbai","latitude":"19.073507000000","longitude":"72.899545000000","distance":"1.04906981264925"}]'

mysql から php にデータを取得しています。php から json にエンコードされて html に送信されますが、html に表示されません。

4

4 に答える 4

0

Content-Type ヘッダーを設定する必要があります。

<?php
    $var = /** whatever you're serializing **/;
    header('Content-Type: application/json');
    echo json_encode($var);
?>

ブラウザでスクリプトの URL を直接入力して、エンコードされた json 文字列を確認できます。
次に、JavaScript/ を介してデータをオブジェクトとして取得できます。

于 2014-06-30T10:43:15.523 に答える
0

まず最初に関数json_encodeには PHP >= 5.2 が必要です

あなたのPHP

$sql = mysqli_query($con,"//all the query goes here//");
$rows = array();
while($r = mysql_fetch_assoc($sql)) {
   $rows[] = $r;
}
return json_encode($rows);

あなたのAJAX

$.ajax({
   type: "POST",                
   url: "http://geolocation.webatu.com/Radius.php",
   data:{lat:lat , lon:lon},
   success: function(response) {
        var objData = jQuery.parseJSON(response);
        $('#t01').html(objData );
   }

成功の中で jquery.parseJSON を使用するだけです。[object object] が表示されます。objData.ID または必要なものを使用する必要があります。これが完全に機能するかどうかはわかりません。必要に応じてコードを変更します。

于 2014-06-30T10:39:04.020 に答える
0

これだけ外して…

echo '{"college":'.json_encode($var).'}';

そしてそれを

 return json_encode($var);

それを行うか....または、ajaxの成功を次のように変更します...

  success: function(response)
    { 
      ver dat = response.college;
    $('#t01').html(dat.ID);

    }
于 2014-06-30T10:12:16.703 に答える