从mysql中提取数据并在javascript

时间:2015-06-02 11:54:31

标签: javascript php jquery mysql json

我试图从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是否至少起作用以及它是否给出了错误?

1 个答案:

答案 0 :(得分:2)

    <?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>