试图将数据从.php文件传递到.js文件

Question

我试图建立一个网站，其中有一个视频部分。我遇到的问题是，为了更改‘.视频播放器’中的视频，我需要将数据库中的数据(视频的名称)从我的index.php文件传递到我的scriptz.js文件。

到目前为止，我尝试的是在div中回显数据，并使用javascript中的document.getElementbyId检索数据，这似乎不起作用。这是代码

INDEX.php

<ul class="video-list">
<?php
while($videotemp=mysql_fetch_array($ris))
{
?>
    <li class="video-element">
        <div class="image-duration">
            <img class="video-thumbnails" src="images/<?php echo $videotemp["thumbnails"] ;?>"/>
            <p class="duration"><?php echo number_format($videotemp["duration"]/100,0);?>:<?php echo $duration2=$videotemp["duration"]%100; ?></p>
        </div>
        <p class="video-title"><?php echo $videotemp["author"];?> - <?php echo $videotemp["name"] ;?></p>
        <div id="source"><?php echo $videotemp["source"]  ?></div>
    </li>
<?php   
}
?>
</ul>

<video id="video-player"  preload="auto" data-setup="{}"  controls  >
    <source id="mp4" src="" type="video/mp4" />
    <source id="ogv" src="" type="video/ogv" />
    <source id="webm" src="" type="video/webm" />
</video>

Cese.css

#source{
visibility:hidden;
}

Scriptz.js

$('.video-element').click(function(){
        var $videosource=document.getElementById("source");

            document.getElementById('mp4').setAttribute('src','videos/'+$videosource + ".mp4");
            document.getElementById('ogv').setAttribute('src','videos/'+$videosource + ".ogv");
            document.getElementById('webm').setAttribute('src','videos/'+$videosource + ".webm");
            $("#video-box")[0].load();

    });

如有任何建议，请提前感谢。

Answer 1

添加innerHTML。

您需要ID中的字符串，而不是ID本身。

So : var $videosource=document.getElementById("source").innerHTML；

Answer 2

你会想看看XMLHttpRequests

您可以将它们与jQuery.ajax一起使用，如下所示：

您可以创建一个PHP页面并将其格式化为JSON，然后返回视频所需的数据。

下面是一个例子：https://jsfiddle.net/ianjamieson/dcz4jed3/2/

$(document).ready(function() {
    $('[data-videoId]').on('click', function() {
    $.ajax({
        type: 'GET',
        url: '/echo/json/', // this would be your data.php page
      data: { // this is like adding ?videoId=1234 to data.php
        videoId: $(this).data('videoId')
      },
      dataType: 'json',
      success: function(json) {
        // json will now contain your video information
        console.log(json);
      }
    });
  });
});


/*
    data.php would need to use PHP function:
  json_encode($phpArray);
*/