試圖將數據從.php文件傳遞到.js文件

我試圖建立一個網站，其中有一個視頻部分。我遇到的問題是，爲了更改'.video-player'中的視頻，我需要將數據庫中的數據（視頻名稱）從我的index.php文件傳遞到我的scriptz。 js文件。試圖將數據從.php文件傳遞到.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(); 

    });

高達任何建議，提前感謝。

來源

2015-12-26 Patratel

你看到'

'嗎？ div內是否有源名稱？ – Chris

不，我不能看到div，因爲它被css隱藏了。裏面的div應該是視頻的名稱 – Patratel

我在網絡檢查工具中的意思。你能否看到信息在div內部進行確認。然後我會說什麼VSnakd說。嘗試確認回聲填充您的網絡工具的div。 – Chris

添加的innerHTML。

您希望ID內的字符串不是ID本身。

因此：var $ videosource = document.getElementById（「source」）。innerHTML;

來源

2015-12-26 15:48:18 VSnake

這也是我的想法。它不工作的唯一原因是因爲他只是獲取元素，而不是元素的文本。 – Chris

嘿，謝謝你這麼快速的回答，我已經嘗試添加.innerHTML，但它似乎沒有什麼區別。雖然你說的話很有道理，所以我會把它留在那裏。 – Patratel

好吧，我終於設法使它工作，但我不得不使用HTML（），因爲jQuery – Patratel

你會想看看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); 
*/

來源

2015-12-26 15:42:43

可能錯誤地解釋了這個問題，但我想這個答案仍然有效，以供參考。 –

要看看阿賈克斯，回來後反饋 – Patratel

試圖將數據從.php文件傳遞到.js文件

回答

相關問題