【问题标题】:Extract data from mysql and use them in javascript从mysql中提取数据并在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 中
  • 你的意思是

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

    试试这个

标签: javascript php jquery mysql json


【解决方案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 数据包含该对象
  • 来聊天我会解释你的
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-12-27
  • 1970-01-01
相关资源
最近更新 更多