从mysql中提取数据并在javascript中使用它们

Posted

技术标签:

【中文标题】从mysql中提取数据并在javascript中使用它们【英文标题】:Extract data from mysql and use them in javascript 【发布时间】:2015-08-16 04:53:25 【问题描述】:

我正在尝试从 mysql 数据库中提取/获取数据并在 javascript 中使用它们。我发现get data from mysql database to use in javascript 非常有用,但我无法显示任何东西(我从未使用过 jQuery,所以可能我遗漏了一些东西,但我还不知道是什么)

<?php
error_reporting(0);
require 'db/connect.php';
require 'function/security.php';

$records = array();

if($result = $db->query("SELECT geoLat,geoLong FROM Stop"))
    if($result->num_rows)
        while ($row = $result->fetch_object())
            $records[] = $row;
        
        //$result->free();
    


/*echo '<pre>', print_r($result),'</pre>';
echo '<pre>', print_r($records),'</pre>';*/
echo json_encode($records);

?>

<!DOCTYPE html>
<html>
<head>
    <title>BrindisiBus</title>
    <style>
    /* style settings for Google map */
    #map-canvas
        width : 500px;  /* map width */
        height: 500px;  /* map height */
    
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <!--- API GOOGLE MAPS V3 -->
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
function initialize() 
    $.getJSON('paline.php', function(data) 
      $.each(data, function(fieldName, fieldValue) 
        $("#" + fieldName).val(fieldValue);
      );
    );
    /*
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var mapOptions = 
    zoom: 4,
    center: myLatlng
  
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var marker = new google.maps.Marker(
      position: myLatlng,
      map: map,
      title: 'Hello World!'
  );
*/


google.maps.event.addDomListener(window, 'load', initialize);

    </script>
</head>
<body>
    <div id='map-canvas' ></div><br/>
    <p id="total"></p>
    <p id="fieldName"></p>
</body>
</html>

通过查询我得到经度和纬度,然后我应该将这些值保存在 js 中并在地图上创建标记。 是否可以在同一个文件中执行所有操作? 我如何检查 getJSON 是否至少可以正常工作以及是否出现错误?

【问题讨论】:

HTML 中有没有 id 为 geoLat 和 geoLong 的元素? geoLat 和 geoLong 是数据库表的字段 $("#" + fieldName).val(fieldValue);这里 fieldName 必须存在于 HTML 中 你的意思是

吗?我也试过 但我没有得到结果
我的意思是

试试这个
【参考方案1】:
    <?php
    error_reporting(0);
    require 'db/connect.php';
    require 'function/security.php';

    $records = array();

    if($result = $db->query("SELECT geoLat,geoLong FROM Stop"))
        if($result->num_rows)
            while ($row = $result->fetch_object())
                $records[] = $row;
            
            //$result->free();
        
    

    /*echo '<pre>', print_r($result),'</pre>';
    echo '<pre>', print_r($records),'</pre>';*/
    $data=json_encode($records);

    ?>

    <!DOCTYPE html>
    <html>
    <head>
        <title>BrindisiBus</title>
        <style>
        /* style settings for Google map */
        #map-canvas
            width : 500px;  /* map width */
            height: 500px;  /* map height */
        
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
        <!--- API GOOGLE MAPS V3 -->
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
        <script>
var data=<?php echo $data; ?>
    function initialize() 

          $.each(data, function(fieldName, fieldValue) 
            $("#fieldName").val(fieldValue.geoLat);
          );

        /*
      var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
      var mapOptions = 
        zoom: 4,
        center: myLatlng
      
      var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

      var marker = new google.maps.Marker(
          position: myLatlng,
          map: map,
          title: 'Hello World!'
      );
    */
    

    google.maps.event.addDomListener(window, 'load', initialize);

        </script>
    </head>
    <body>
        <div id='map-canvas' ></div><br/>
        <p id="total"></p>
        <p id="fieldName"></p>
    </body>
    </html>

【讨论】:

fieldName 中没有显示任何内容,但现在 javascript 中的 var 数据包含该对象 来聊天我会解释你的

以上是关于从mysql中提取数据并在javascript中使用它们的主要内容,如果未能解决你的问题,请参考以下文章

如何从 MySQL 数据库中获取数据并在 javascript 自动完成中使用?

如何使用从 javascript/html 中的外部 php 文件中提取的 JSON 数据?

如何创建表在Mysql中使字段从某一个数开始自增

从核心数据中提取 NSDate 并在 IOS 中显示它

如何从 Message 中提取数据并在 Notification(Android) 中显示

设计查询 - 从第三方数据源中提取数据并在 UI 上显示