3

编辑：好的，我遇到了问题。#t01 ID 在 ajax 成功函数内无法访问，因此没有显示任何内容。它被称为 javascript 提升。但我没有找到解决这个问题的方法。当我将 document.getElementById('t01').innerHTML = content 放在 ajax 语句之外时，我得到未定义的显示

我无法让从 php 返回的 json 显示在我的 html 中。我不确定，我要去哪里错了。

索引.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

第一件事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 即可。这会给你[对象对象]。您必须使用 objData.ID 或您想要的东西。我不确定这会完全奏效。根据需要修改代码。

于 2014-06-30T10:39:04.020 回答
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

把这个去掉...

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 回答
0

在 index.html 你有success: function(response)和var college = data.college。将此更改为var college = response.college.

于 2014-06-30T17:24:14.817 回答