在 javascript 中访问 PHP 变量

Question

好的，所以我不是程序员，所以请不要打我太多...我有一些 javascript（用于 jqgrid）的情况，我希望从中填充一些值一个 PHP 变量。我为解决这个问题所做的是使用 PHP 并将所有 javascript 代码放在“此处文档”中。一切看起来都很好，但我想我会联系你们所有人，看看是否有办法简化我的编程。代码如下供参考。

global $database;
$switchesStr = "";
$sql = "SELECT id,name FROM switch ORDER BY name asc";
$result = $database->query($sql);
while($row = mysql_fetch_array($result,MYSQL_NUM)) {
        $switchesStr .= $row[0].":".$row[1].";";
}
$switchesStr = substr_replace($switchesStr,"",-1);

$vlansStr = "";
$vlansStr = "0:System Default;";
$sql = "SELECT id,vlan_description FROM vlan ORDER BY default_name asc";
$result = $database->query($sql);
while($row = mysql_fetch_array($result,MYSQL_NUM)) {
        $vlansStr .= $row[0].":".$row[1].";";
}
$vlansStr = substr_replace($vlansStr,"",-1);

echo <<<DOC
<script type="text/javascript">
jQuery(document).ready(function(){ 
    jQuery("#htmlTablePorts").jqGrid({
    url:'crud_ports.php',
    editurl:'crud_ports.php',
    datatype: 'json',
    mtype: 'POST',
    colNames:['id','switch','Switch IP','Switch Name','Port Name','up','Comment','restart_now','Auth Profile','VLAN','Shutdown','Last Seen'],
    colModel :[{
     name:'id'
  ,width:55
 },{
         name:'switch'
        ,index:'switch'
  ,editable:true
    },{
     name:'ip'
     ,index:'ip'
     ,width:70
    },{ 
     name:'sname'
     ,index:'sname'
     ,width:120
     ,edittype:'select'
  ,editoptions:{value:"$switchesStr"}
    },{
     name:'pname'
     ,index:'pname'
     ,width:65
    },{
  name:'up'
  ,index:'up'
  ,width:80
 },{
  name:'comment'
  ,index:'comment'
  ,width:125
  ,editable:true
 },{
  name:'restart_now'
  ,index:'restart_now'
  ,width:110
 },{
  name:'auth_profile'
  ,index:'auth_profile'
  ,width:110
  ,editable:true
     ,edittype:'select'
  ,editoptions:{value:"0: ;1:Static;2:Dynamic"}
 },{
  name:'vlan_description'
  ,index:'vlan_description'
  ,width:110
  ,editable:true
  ,edittype:'select'
  ,editoptions:{value:"$vlansStr"}
 },{
  name:'shutdown'
  ,index:'shutdown'
  ,width:110
  ,editable:true
     ,edittype:'checkbox'
        ,editoptions:{value:"Yes:No"}
 },{
  name:'last_monitored'
  ,index:'last_monitored'
  ,width:110
 }],
    pager: jQuery('#htmlPagerPorts'),
    rowNum:20,
    rowList:[10,20,30,50,100],
    sortname: 'switch',
    sortorder: "asc",
    viewrecords: true,
    height: "auto",
    imgpath: 'themes/steel/images',
    caption: 'Port Management',
    multiselect: false,
    afterInsertRow: function(rowid, aData){ 
       switch (aData.shutdown) { 
        case '0': jQuery("#htmlTablePorts").setCell(rowid,'shutdown','No',{}); break;
        case '1': jQuery("#htmlTablePorts").setCell(rowid,'shutdown','Yes',{}); break;
       }
       switch (aData.auth_profile) { 
        case '0': jQuery("#htmlTablePorts").setCell(rowid,'auth_profile',' ',{}); break;
        case '1': jQuery("#htmlTablePorts").setCell(rowid,'auth_profile','Static',{}); break;
        case '2': jQuery("#htmlTablePorts").setCell(rowid,'auth_profile','Dynamic',{}); break;
       }
       switch (aData.up) { 
        case '2': jQuery("#htmlTablePorts").setCell(rowid,'sname','',{background:'red',color:'white'});
           jQuery("#htmlTablePorts").setCell(rowid,'pname','',{background:'red',color:'white'});
           jQuery("#htmlTablePorts").setCell(rowid,'auth_profile','',{background:'red',color:'white'});
           jQuery("#htmlTablePorts").setCell(rowid,'shutdown','',{background:'red',color:'white'});
           jQuery("#htmlTablePorts").setCell(rowid,'ip','',{background:'red',color:'white'});
           jQuery("#htmlTablePorts").setCell(rowid,'comment','',{background:'red',color:'white'});
           jQuery("#htmlTablePorts").setCell(rowid,'vlan_description','',{background:'red',color:'white'});
           jQuery("#htmlTablePorts").setCell(rowid,'last_monitored','',{background:'red',color:'white'});
        break;
       }
       switch (aData.shutdown) { 
        case '2': jQuery("#htmlTablePorts").setCell(rowid,'sname','',{color:'red'});
           jQuery("#htmlTablePorts").setCell(rowid,'pname','',{color:'red'});
           jQuery("#htmlTablePorts").setCell(rowid,'auth_profile','',{color:'red'});
           jQuery("#htmlTablePorts").setCell(rowid,'shutdown','',{color:'red'});
           jQuery("#htmlTablePorts").setCell(rowid,'ip','',{color:'red'});
           jQuery("#htmlTablePorts").setCell(rowid,'comment','',{color:'red'});
           jQuery("#htmlTablePorts").setCell(rowid,'vlan_description','',{color:'red'});
           jQuery("#htmlTablePorts").setCell(rowid,'last_monitored','',{color:'red'});
        break;
       }
      }
  }).navGrid('#htmlPagerPorts',
  {add:false}, //options
  {height:130,reloadAfterSubmit:true}, // edit options
  {height:130,reloadAfterSubmit:true}, // add options
  {reloadAfterSubmit:true}, // del options
  {} // search options
     ).hideCol(["id","switch","auth_profile","up","restart_now","shutdown"]);

});/* end of on ready event */ 
</script>
DOC;

Answer 1

我相信最好的方法是在你的 javascript 中回显你需要的内容。例如json_encode:

<?php $name = 'Ben'; ?>

<script type="text/javascript">
var name = <?php echo json_encode($name); ?>;
alert(name);
</script>

或者如果你知道值的类型并且它并不复杂（如字符串）：

<script type="text/javascript">
var name = "<?php echo $name; ?>";
alert(name);
</script>

Answer 2

您可以让 PHP 在运行时写入信息...

<script type="text/javascript" language="<strong class="highlight">javascript</strong>">
<!--
<?php 
echo("firstVar = $var1;");
echo("2ndVar = $var2;");
?>
// -->
</script>

Answer 3

好吧，如果您对这种方式感到满意，请继续。风格永远是个人的......

BenMills 和 Urda 的方法也可以。并且，当 javascript 中的 vars 是字符串时，不要忘记引用它。