如何将 json 编码变量从 .php 传递到外部 .js？答案

【问题标题】：How to pass json_encoded variables from .php to external .js?如何将 json 编码变量从 .php 传递到外部 .js？
【发布时间】：2018-06-05 16:24:24
【问题描述】：

这是我的第一篇文章 :) 我在将 json_encoded 变量从 PHP VIEW 文件传递到外部 JS 时遇到问题。我正在使用 FuelPHP。以下是 VIEW 的一部分： 1. 这些是 PHP 变量：

<?php
  $sensor_id_num = $sensor->id_num; 
  $sensor_name = $sensor->name;
  $sensor_unit = $sensor->unit;
  $sensor_lati = $sensor->lati;
  $sensor_longi = $sensor->longi;
?>

2.这里的变量是json_encoded，它们的值是给JS vars的：

<script src="<?php echo Asset::get_file('mapmarkers.js','js') ?>" type="text/javascript">
  var sensor_id_num = <?php echo json_encode($sensor_id_num); ?>;
  var sensor_name = <?php echo json_encode($sensor_name); ?>;
  var sensor_unit = <?php echo json_encode($sensor_unit); ?>;
  var sensor_lati = <?php echo json_encode($sensor_lati); ?>;
  var sensor_longi = <?php echo json_encode($sensor_longi); ?>;
</script>

3. 上面提到的mapmarkers.js 是我想要传递变量的外部JS。在那个 JS 中，我使用 google.maps javascript API 为每个地图绘制地图和一个标记。每个标记都代表一个传感器的位置，这就是我要传递纬度和经度的原因。那应该是php VIEW的一部分。该视图显示一些传感器的文本信息以及地图。

4. 所以文本信息和地图是可视化的，但不是标记。问题出在 JS 文件中。当我尝试将标签中的变量用于 JS 时，浏览器控制台显示它们的值是“未定义”。我正在使用“window.name_of_var”访问变量。即使我在没有“窗口”的情况下访问它们。它们的值未显示，而是显示“未捕获的 ReferenceError：未定义 sensor_lati”。这是 JS 的一部分：

var myLatLng = new google.maps.LatLng(window.sensor_lati,window.sensor_longi);

var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        title: window.sensor_name,
        html: window.sensor_name

});
google.maps.event.addListener(marker, 'click', function () {
      infowindow.setContent(html);
      infowindow.open(map, marker);
});

有人知道问题出在哪里吗？我对 FuelPHP 和 JavaScript 没有太多经验。任何帮助将不胜感激;)

【问题讨论】：

也许可以做一个<script> // all json here </script> 然后<script src="googlemaps"/>

标签： javascript php jquery google-maps-api-3

【解决方案1】：

您应该将<script /> 分成两部分。
这里可能不需要 json_encode php 函数。还要添加换行双引号。
必须在定义变量后添加 mapmarkers.js

<script type="text/javascript">
  window.sensor_id_num = "<?php echo $sensor_id_num; ?>";
  window.sensor_name = "<?php echo $sensor_name; ?>";
  window.sensor_unit = "<?php echo $sensor_unit; ?>";
  window.sensor_lati = "<?php echo $sensor_lati; ?>";
  window.sensor_longi = "<?php echo $sensor_longi; ?>";
</script>

<script src="<?php echo Asset::get_file('mapmarkers.js','js') ?>" type="text/javascript" />

【讨论】：

【解决方案2】：

在调用外部js文件之前设置变量

<script type="text/javascript">
  var sensor_id_num = <?php echo json_encode($sensor_id_num); ?>;
  var sensor_name = <?php echo json_encode($sensor_name); ?>;
  var sensor_unit = <?php echo json_encode($sensor_unit); ?>;
  var sensor_lati = <?php echo json_encode($sensor_lati); ?>;
  var sensor_longi = <?php echo json_encode($sensor_longi); ?>;
</script>
<script src="<?php echo Asset::get_file('mapmarkers.js','js') ?>" type="text/javascript">

【讨论】：

【解决方案3】：

您不能在其中包含带有src 属性和 javascript 代码的<script> 元素。嗯，你可以，但几乎没有定义浏览器对此做了什么，所以你的结果会因浏览器而异。

解决方案是先定义变量，然后包含远程脚本：

<script type="text/javascript">
    var sensor_id_num = <?php echo json_encode($sensor_id_num); ?>;
    var sensor_name = <?php echo json_encode($sensor_name); ?>;
    var sensor_unit = <?php echo json_encode($sensor_unit); ?>;
    var sensor_lati = <?php echo json_encode($sensor_lati); ?>;
    var sensor_longi = <?php echo json_encode($sensor_longi); ?>;
</script>
<script src="<?php echo Asset::get_file('mapmarkers.js','js') ?>" type="text/javascript"></script>

【讨论】：