由于某些 javascript 提升，变量显示为未定义

Posted

技术标签:

【中文标题】由于某些 javascript 提升，变量显示为未定义【英文标题】：variable showed as undefined because of some javascript Hoisting 【发布时间】：2014-08-20 16:08:18 【问题描述】：

编辑：好的，我有问题。 #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 中。

【问题讨论】：

您是否在浏览器上查看过网络调试以查看它是否是有效的 json？ 你试过这个 var objData = jQuery.parseJSON(response); .在你的成功 ajax 中？ @ArunBS 不，我没有尝试过。刚接触 json 的东西。你能根据我的 parseJSON 代码帮助我正确的语法吗 angularjs 和这个问题有什么关系？ 其实这只是部分代码。项目的其余部分在 angularjs 上。也许在某种程度上 angularjs 可能会产生问题，所以添加了 angularjs 标签 【参考方案1】：

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

【讨论】：

改变了它。忘记在那边编辑了！！仍然没有工作..感谢您的时间【参考方案2】：

您必须设置 Content-Type 标头：

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

您可以通过在浏览器上直接输入脚本的 url 来验证编码的 json 字符串。 然后你可以通过你的 JavaScript 获取数据作为对象/

【讨论】：

嗯，您在回答中分享的内容有歧义，您有此代码 $(document).ready(function() $.ajax( type: 'GET', url: "server. php", data:lat:lat, lon:lon, dataType: 'jsonp', 成功: function(response) content = ""; var parsed = JSON.parse(response); for(var i in parsed) content += "" + parsed[i].ClassName+" "+ parsed[i].City+""; document.getElementById('t01').innerHTML = content; ); 在函数中，因为它永远没有机会自己执行它【参考方案3】：

第一件事 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 或您想要的东西。我不确定这会完全奏效。根据需要修改代码。

【讨论】：

没有工作:(感谢您的时间。任何更多的建议 你的php代码和ajax代码在不同的页面仪式？ 是的。 PHP 已上传到 web 托管站点。 AJAX 在移动端。它是一个科尔多瓦应用程序【参考方案4】：

删除这个...

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

替换成

 return json_encode($var);

要么这样做......要么将你的 ajax 成功更改为这样的......

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

【讨论】：

好吧，这些“响应”：“已连接\”college\”：[\“0\”都不是有效的JSON，所以我不知道你实际上想做什么。但我要展示的是，您必须通过大学标签访问您发送的内容，因为那是它的封装位置，或者完全删除它。你的 json 是否真的有效，是否有效，取决于你。 我更新了回复。编辑代码并立即以正确的格式获取响应

以上是关于由于某些 javascript 提升，变量显示为未定义的主要内容，如果未能解决你的问题，请参考以下文章

当我尝试使用 JavaScript 调用智能合约函数时，它们显示为未定义

Mongoose/MongoDB 结果字段在 Javascript 中显示为未定义

Mongoose/MongoDB 结果字段在 Javascript 中显示为未定义

JavaScript变量声明与提升

javascript基础语法——变量和标识符

javascript 变量提升