如何将数组值从 PHP 传递到 JavaScript

How to pass array values from PHP to JavaScript?

本文关键字：JavaScript PHP 数组      更新时间：2023-09-26

好的。所以我整天都在这里，阅读并遵循有关该主题的所有解决方案，但我一无所获。什么都没用。你能告诉我如何做到这一点，用完整且易于理解的例子。我是JavaScript和PHP的新手，所以我如何从PHP文件获取数组值到JavaScript。我尝试这样做：var locations = <?php echo json_encode($location); ?>;但我给了我错误。没有人回答为什么。此代码在此处： 

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="width: 500px; height: 400px;"></div>
  <script type="text/javascript">
    var locations = [
  ['Municipal Hall', 6.414333734068895, 125.61093270778656, 1],
  ['Camarillo Household', 6.4345278, 125.58975, 2],
  ['Perez Household', 6.4343889, 125.59202777777777, 3],
  ['Usman Household', 6.4338056, 125.59191666666666, 4],
  ['Lim Household', 6.4333889, 125.59419444444444, 5]
];
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(6.40, 125.60),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var infowindow = new google.maps.InfoWindow();
    var marker, i;
    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });
      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
  </script>
</body>
</html>

我想从数据库中的值更改变量locations的值。 所以我得到了这个PHP文件：

<?php
$servername = "host";
$username = "username";
$password = "password";
$dbname = "dbname";
// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}
	$sql='SELECT a.Household_Name, b.Latitude, b.Longitude FROM household a, location b WHERE a.Household_ID = b.Household_ID;';
	$result = mysqli_query($conn, $sql);
		
	if(mysqli_num_rows($result) > 0){
		// output data of each row
		
		for($i=0;$i<mysqli_num_rows ( $result );$i++){
			$row=mysqli_fetch_row($result);
			$location[]= array($row[0].', '.$row[1].', '.$row[2].','.($i+1));
			//echo "Household Name: " . $row[0]. " - Latitude: " . $row[1]. " - Longitude " . $row[2]. " " .($i+1)."<br>";
		}
		
	}else{echo "0 results";}
?>

它工作正常。 它从数据库输出数据。 现在我想知道的是如何将数据库中的值转换为可用于代替locations变量的值，以便标记将出现在地图上？ var locations = <?php echo json_encode($location); ?>;这个家伙给我错误，我遵循了我能做的所有指示，但仍然是错误。您可以修改我的代码以使其正常工作，或者您可以在您所知的工作/功能代码中指出我。求求你，帮帮我。我在这里遇到了很大的麻烦。

尝试location[]将变量从 ：

$location[]= array($row[0].', '.$row[1].', '.$row[2].','.($i+1));

自 

$location[]= array($row[0],$row[1],$row[2],($i+1));

我在下面添加了完整的代码及其工作：

<?php
$servername = "host";
$username = "username";
$password = "password";
$dbname = "dbname";
// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}
$sql='SELECT a.Household_Name, b.Latitude, b.Longitude FROM household a, location b WHERE a.Household_ID = b.Household_ID;';
$result = mysqli_query($conn, $sql);
if(mysqli_num_rows($result) > 0){
    // output data of each row
    for($i=0;$i<mysqli_num_rows ( $result );$i++){
        $row=mysqli_fetch_row($result);
        $location[]= array($row[0],$row[1],$row[2],($i+1));
        //echo "Household Name: " . $row[0]. " - Latitude: " . $row[1]. " - Longitude " . $row[2]. " " .($i+1)."<br>";
    }
}else{echo "0 results";
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Multiple Markers</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
    type="text/javascript"></script>
</head>
<body>
    <div id="map" style="width: 500px; height: 400px;"></div>
    <script type="text/javascript">
    /*var locations = [
  ['Municipal Hall', 6.414333734068895, 125.61093270778656, 1],
  ['Camarillo Household', 6.4345278, 125.58975, 2],
  ['Perez Household', 6.4343889, 125.59202777777777, 3],
  ['Usman Household', 6.4338056, 125.59191666666666, 4],
  ['Lim Household', 6.4333889, 125.59419444444444, 5]
];*/
var locations = <?php echo json_encode($location); ?>;

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(6.40, 125.60),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var infowindow = new google.maps.InfoWindow();
    var marker, i;
    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });
      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
  </script>
</body>
</html>

你的数组不是"真正的"数组如果您的代码是：

$location[]= array($row[0].', '.$row[1].', '.$row[2].','.($i+1));

我认为结果将是这样的：

<script type="text/javascript">
    var locations = [["Municipal Hall, 6.414333734068895, 25.61093270778656, 1"],["Camarillo Household', 6.4345278, 125.58975, 2"],......];
.....
</script>

尝试使用 ：

$location[]= array($row[0],$row[1],$row[2],($i+1));

编辑：我不建议使用这种方式将 PHP 数组传递给 JS，因为它会使 html 页面过载，并且导航器无法处理数组的内容。执行此操作的更好方法是在使用此 http://api.jquery.com/jquery.ajax/加载页面时使用 Ajax 函数

相关文章：