PHP：使用来自 php 的参数调用 javascript 函数答案

【问题标题】：PHP: calling javascript function with parameters from phpPHP：使用来自 php 的参数调用 javascript 函数
【发布时间】：2013-03-14 04:40:15
【问题描述】：

我正在尝试使用 PHP 变量的参数调用 JavaScript 函数。我尝试了两种方法。

在 PHP 中使用 echo 中的脚本标签调用 JavaScript 函数即

<?php
echo '<script>initialize('.$lat.','.$lang.','.$zom.');</script>';
?>

将 PHP 变量值分配给 JavaScript 变量
var lat=""; var lang=""; var zoom=""; 警报（纬度+语言+缩放）；初始化（纬度，语言，缩放）；脚本>

在第一种情况下，当我从页面源交叉检查时调用了函数，但传递的参数未定义。并且在第二种情况下，值已成功保存在 JavaScript 变量中，通过 alert() 进行检查，但未调用函数。

这是整个代码：

<!DOCTYPE html>

<html>

<head>

    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">

    </script>
<?php
     if(  isset($_POST['lat']) && isset($_POST['lang']) && isset($_POST['zoom']) && isset($_POST['city'])):

        $lat=$_POST['lat']; 

        $lang=$_POST['lang'];

        $zoom=$_POST['zoom'];

        $city=$_POST['city'];
        $zom=(int)$zoom;
              var_dump($lang);
        var_dump($lat);
        //var_dump($zoom);
              var_dump($zom);
          //echo '<script>initialize('.$lat.','.$lang.','.$zom.');</script>';

    endif;

?>          


<script>
var lat="<?php echo $lat; ?>";
var lang="<?php echo $lang; ?>";
var zoom="<?php echo $zoom; ?>";
alert(lat+lang+zoom);
initialize(lat,lang,zoom);
</script>

    <script>


function initialize(a,b,zom){        

    if (!a || !b ||!zom){ 
    alert('came on not' +a+b +zom);

    //      var centerLoc=new google.maps.LatLng( 33.61701054652337,73.37824736488983);

          zoom=16;

    }

    else

    {
        alert('came');

        var zoom =parseInt(zom);

        var centerLoc=new google.maps.LatLng(a,b);

    }

       var mapProp = {

            center:centerLoc,

            zoom:zoom,

            //mapTypeId:google.maps.MapTypeId.ROADMAP

            mapTypeId:google.maps.MapTypeId.SATELLITE

       };  

       var map=new google.maps.Map(document.getElementById("googleMap") ,mapProp);

            marker=new google.maps.Marker({

                  position:centerLoc,

                  title:'Click to zoom'

             });

    google.maps.event.addListener(marker,'click',function() {

                map.setZoom(map.getZoom()+1);

                map.setCenter(marker.getPosition());

       });

            marker.setMap(map);

}

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

</script>

</head>

<body style= "background-color:gainsboro;">

    <form method="POST"  action="myPage.php" >

        Enter latitude:     <input type ="text" name="lat" id="lat" / ><br/>

        Enter longitude:    <input type ="text" name="lang"  id="lang"/ ><br/>

        Enter City Name:    <input type="text" name="city" id="city"/><br/>

        Enter Zoom level:   <input type ="text" name="zoom"  id="zoom"/ ><br/>

                        <input type="button" value ="Perview" onclick=" initialize(

                     document.getElementById('lat').value,

                     document.getElementById('lang').value,

                     document.getElementById('zoom').value)"/>

                        <input type="Submit"  value="Save" />

    </form>

                        <center><div id="googleMap"  style="width:1000px;height:500px;"></div></center>

</body>

</html>

【问题讨论】：

检查 JavaScript 控制台是否有错误。
当你执行echo '<script>initialize('.$lat.','.$lang.','.$zom.');</script>';时，你在生成的页面的源代码中得到了什么？
尝试调试你的 js - 例如，使用 Chrome 的控制台
你调用这个函数，还是它只是“存在”？您可能需要在body onload、something onclick 等中调用它。
var lang="="<?php echo $lang; ?>"; 似乎有点奇怪。 PHP处理后是什么样子的？

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

【解决方案1】：

使用json_encode()。如果您不这样做，则在数据从 PHP 传递到 HTML/JS 层时，您总是有可能错误地转义数据。

$vars = array($lat, $lang, $zoom);
// JSON_HEX_TAG and JSON_HEX_AMP are to remove all possible surprises that could be
// caused by vars that contain '</script>' or '&' in them. The rules for 
// escaping/encoding inside script elements are complex and vary depending 
// on how the document is parsed.
$jsvars = json_encode($vars, JSON_HEX_TAG | JSON_HEX_AMP);

echo "<script>initialize.apply(null, $jsvars)</script>";

一般来说，为了您的理智，您需要提供给当前页面上运行的 js 的所有 PHP 数据应收集到单个 PHP 数组中，然后放入单个 js 对象中。例如：

<?php
$jsdata = array(
   'formvars' => array(
                      'lat' => $lat,
                      'lang' => $lang,
                      'zoom' => $zoom
    ),
   'username' => $username,
   'some_other_data' => $more stuff
);
?>
<script>
  var JSDATA = <?=json_encode($jsdata, JSON_HEX_TAG | JSON_HEX_AMP )?>;
  initialize(JSDATA.formvars.lat, JSDATA.formvars.lang, JSDATA.formvars.zoom);
</script>

现在 JS 和 PHP/HTML 层之间只有一个接触点，因此您可以轻松跟踪您在 JS 命名空间中添加的内容。

【讨论】：

【解决方案2】：

在浏览器加载完 javascript 后调用该函数。

<script>
     window.onload = function() {
         var lat="<?php echo $lat; ?>";
         var lang="<?php echo $lang; ?>";
         var zoom="<?php echo $zoom; ?>";
         alert(lat+lang+zoom);
         initialize(lat,lang,zoom);
     };
</script>

【讨论】：

感谢您的回复，但我不需要在加载窗口时调用它

【解决方案3】：

只需调用预定义的 java 脚本代码，如 jsFunction() ；在你的 php 代码中

【讨论】：

【解决方案4】：

我在Calling a javascript function from php 上找到了一些非常好的示例，看来您也可以在PhpFiddle.org 上在线运行代码

以防万一链接断开，以下是示例：

示例1：不带参数调用

<?php
echo "<a href='http://www.hoverdroids.com/2015/06/10/calling-a-javascript-function-from-php/'>Full example at: http://www.hoverdroids.com/2015/06/10/calling-a-javascript-function-from-php/</a>";
echo "<p>Add whatever PHP you want here...</p>";
?>
<!--This JS function can be defined here or a separate file since so long as it gets created in JS space'-->
<script>
    function callAlert(){
        alert('A alert without a parameter');
    }
</script>
<script>
    callAlert();
</script>
<?php
?>

示例 2：使用单个参数调用

<?php
echo "<a href='http://www.hoverdroids.com/2015/06/10/calling-a-javascript-function-from-php/'>Full example at: http://www.hoverdroids.com/2015/06/10/calling-a-javascript-function-from-php/</a>";
echo "<p>Add whatever PHP you want here...</p>";

//Data that is going to be passed into the JavaScript function. Try to keep all vars together so
//that it's easier to track down the php/javascript interaction
$jsdata = 'MyName';
?>
<!--This JS can be here or a separate file since all it's doing is defining a function in the JS space'-->
<script>
    function callAlert(text){
        alert(text);
    }
</script>
<!--This JS must be defined with the php since it's using previously defined php variables -->
<script>
    var JSDATA = <?=json_encode($jsdata, JSON_HEX_TAG | JSON_HEX_AMP )?>;

    //Prompt using a single var
    callAlert(JSDATA);
</script>
<?php
?>

示例 3：使用参数数组调用

<?php
echo "<a href='http://www.hoverdroids.com/2015/06/10/calling-a-javascript-function-from-php/'>Full example at: http://www.hoverdroids.com/2015/06/10/calling-a-javascript-function-from-php/</a>";
echo "<p>Add whatever PHP you want here...</p>";

$myname = 'MyName';
$yourname = 'YourName';

//Data that is going to be passed into the JavaScript function. Try to keep all vars together so
//that it's easier to track down the php/javascript interaction
$jsdata = array(
                'input' => $myname,
                'array_input' => array(
                                        'name' => $yourname
                ),
);
?>
<!--This JS can be here or a separate file since all it's doing is defining a function in the JS space'-->
<script>
    function callAlert(text){
        alert(text);
    }
</script>
<!--This JS must be defined with the php since it's using previously defined php variables -->
<script>
    var JSDATA = <?=json_encode($jsdata, JSON_HEX_TAG | JSON_HEX_AMP )?>;

    //Prompt using a single var in the array
    callAlert(JSDATA.input);


    //Prompt using a var from a nested array    
    callAlert(JSDATA.array_input.name);
</script>
<?php
?>

【讨论】：

谁可能会否决这个答案？我提供了三个示例，这些示例以越来越复杂的方式回答了这个问题，以及为喜欢音频/视频解决方案的用户解释了这一点的视频。所以，对于投反对票的人，请解释一下，而不是跑路！！！