【问题标题】:Passing PHP Variable Into jQuery Function将 PHP 变量传递给 jQuery 函数
【发布时间】:2012-07-01 17:28:58
【问题描述】:

我正在尝试为我的网站实现 jQuery Flare 视频插件。有一个下拉菜单,用户必须从中选择一年,当单击提交按钮时,视频将显示在屏幕上。我有一个数据库,可以从数据库中获取视频的路径,即 $row['videoName'] 。 我的问题是如何在 jQuery 函数中传递 PHP 变量。在插件中给出的示例中,在 jQuery 函数的src 属性中给出了视频的完整路径。我正在尝试通过将 PHP 变量传递给 src 来使其动态化。

我没有收到任何错误,包含视频的 div 出现在屏幕上,但视频没有显示。

谢谢。

    jQuery(function($){
          fv = $("#video").flareVideo();
          fv.load([
            {
              src:  '$row['videoName']',
              type: 'video/mp4'
            }
          ]);
        })
      </script>

【问题讨论】:

标签: php jquery video plugins src


【解决方案1】:

要访问 PHP 变量,您必须将代码括在 PHP 括号中,如下所示:

jQuery(function($){
    fv = $("#video").flareVideo();
    fv.load([
      {
        src:  "<?php echo $row['videoName']; ?>",
        type: 'video/mp4'
      }
    ]);
  })
</script>

这也必须与创建 PHP 变量以允许访问在同一页面上。

【讨论】:

  • 感谢您的回答。另一个问题是......有没有办法让 PHP 变量与 jQuery 在同一页面上?也许是 SESSIONS 或 require() ?
  • 是的,您可以使用 $_SESSION[] 变量并获得相同的结果,只需确保 JavaScript 包含在 PHP 页面中,以便呈现 PHP。
  • 我正在尝试显示不带双引号的 PHP 变量,并且它总是在控制台(Chrome 开发人员工具)中出错。您的解决方案通过保留双引号解决了我的问题。谢谢
【解决方案2】:

我建议尽量避免 PHP 预处理在 javascript 之外。我有一个约定,在视图中从 PHP 创建所有变量的哈希,然后将它们注入到我的 Javascript 对象中。在这种情况下,您可以将这样的内容放入视图中:

<script>
var options = {
    videoName: '<?php echo $row['videoName']?>'
}
</script>

或

<script>
var options = <?php echo json_encode($row);?>;
</script>

稍后在您的任何 javascript 文件中,您都可以这样做:

$(function(){
    fv = $("#video").flareVideo();
    fv.load([{
        src:  options.videoName,
        type: 'video/mp4'
    }]);
})

【讨论】:

    【解决方案3】:
    jQuery(function($){
          fv = $("#video").flareVideo();
          fv.load([
            {
              src:  '<?= $row['videoName'] ?>',
              type: 'video/mp4'
            }
          ]);
        })
      </script>
    

    【讨论】:

      【解决方案4】:

      混合 php 和 js 代码是丑陋的。因此,当您将所有 js 代码放入 .js 文件中时,您可以这样做:

      将代码写入 .js 文件

      jQuery(document).ready(function($){
          fv = $("#video").flareVideo();
          fv.load([
          {
              src:  videoName, // videoName is in the global scope
              type: 'video/mp4'
          }
          ]);
      })
      
      var videoName = ""; // init var to avoid undefined values
      

      将代码写入 .php 文件

      echo <<<EOM
      <script type="text/javascript">
      var videoName = '{$row['videoName']}';
      </script>
      EOM;
      

      【讨论】:

        【解决方案5】:

        视频的 URL 应该在 HTML 范围内的某个位置。 JS 可以方便地获取 URL,例如

        fv.load({
          src: $('.videlink').attr('href'),
          type: 'video/mp4'
        })
        

        我不知道这个flareVideo() 的确切javascript,但URL 应该真的在你的HTML 中的某个地方。不要只将它传递给 JavaScript,这真是丑陋的设计:\

        【讨论】:

          【解决方案6】:

          将 PHP 变量传递给 jQuery 的另一种方法是通过 DOM。您说您有一个用户选择年份的下拉列表。构建页面时,获取整个视频数组,如下所示:

          $rows = array(
              '1991' => '/url/to/your/1991-video',
              '1992' => '/url/to/your/1992-video',
              '1993' => '/url/to/your/1993-video',
              '1994' => '/url/to/your/1994-video'
          );
          

          所以你可以像这样构建你的选择列表:

          <select id="videoName">
            <option value="<?php echo $rows['1991'] ?>">1991</option>
            <option value="<?php echo $rows['1992'] ?>">1992</option>
            <option value="<?php echo $rows['1993'] ?>">1993</option>
            <option value="<?php echo $rows['1994'] ?>">1994</option>
          </select>
          

          我使用了一个简单的数组,但您会使用数据库查询的结果,您也可以使用 foreach 来构建下拉列表。

          那么您的视频脚本只会引用 $('#videoName').value()。

          通过对 select 执行 .change() 事件处理程序,您可以启动视频而无需重新加载任何页面。

          您可以使用相同的方法根据数据库查询构建项目表。只需根据您的数据库输出命名您的对象或使用唯一值标识它们。

          (代码未经测试)

          【讨论】:

            【解决方案7】:

            想用 cookie 来做这件事吗?我觉得是这样的……

            PHP

            setcookie('your_cookie_name', json_encode($your_array), time()+3600, "\");
            

            Javascript

            然后,您将在 JS 中使用 PHP 数组来执行您想要在其上执行的任何 JS。

             var arrayVar = []
                arrayVar = $.parseJSON($.cookie('your_cookie_name'));
            

            【讨论】:

              猜你喜欢
              • 2012-03-02
              • 2011-01-18
              • 1970-01-01
              • 2015-12-17
              • 2013-02-19
              • 2012-06-19
              • 2014-10-31
              • 1970-01-01
              • 2012-06-18
              相关资源
              最近更新 更多