2013-03-24 74 views
3

調用javascript函數我試圖調用具有PHP變量參數的JavaScript函數。 我試過2種方法。PHP:使用參數從php

  1. 調用JavaScript函數在PHP和腳本標籤回聲 即

    <?php 
    echo '<script>initialize('.$lat.','.$lang.','.$zom.');</script>'; 
    ?> 
    
  2. 透過JavaScript變數

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

在第一種情況下功能分配PHP變量的值被稱爲我從頁面源進行交叉檢查,但傳遞的參數是未定義的。 在第二種情況下,值已成功保存在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> 
+2

檢查JavaScript控制檯錯誤。 – str 2013-03-24 18:26:33

+0

當你執行'echo'';',你在生成的頁面的源代碼中得到了什麼? – Jean 2013-03-24 18:26:49

+0

初始化(30,70,5); – Rabeel 2013-03-24 18:27:58

回答

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> 
+0

感謝您的回覆,但我不需要它被稱爲窗口加載 – Rabeel 2013-03-24 20:04:34

4

使用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命名空間。

0

只需調用預定義的Java腳本代碼,如jsFunction();在你的PHP代碼

-1

我發現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 
?> 
+0

誰會downvote這個答案?我提供了三個例子來回答這個問題,隨着視頻逐漸增加,這些視頻解釋了喜歡音頻/視頻解決方案的用戶的觀點。所以,對於downvoter,請解釋一下,而不是一蹴而就的! – 2016-02-04 20:04:48