如何在PHP中使用一個javaScript變量？

Question

我現在所擁有的是一款簡單的Facebook應用程序，它從YouTube頻道中提取視頻信息。

剛纔，我將第一個視頻從YouTube反饋到標題，視圖和說明的佔位符中，所有視頻（包括第一個）都顯示在保存嵌入視頻的div下方。

然後，當用戶單擊任何視頻縮略圖時，該視頻就會嵌入到佔位符div中。

我可以通過硬編碼YouTube關聯數組內的視頻的id來工作，但我無法弄清楚如何在我的jQuery代碼的最後一行中使用PHP中的id變量。

這裏是我當前的代碼：

$url = 'http://gdata.youtube.com/feeds/api/videos?max-results=20&alt=jsonc&orderby=published&format=5&safeSearch=none&author=CHANNELID&v=2'; 
$ch = curl_init(); 
curl_setopt($ch, CURLOPT_URL, $url); 
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); 
curl_setopt($ch, CURLOPT_REFERER, $url); 
$body = curl_exec($ch); 
curl_close($ch); 
$data = json_decode($body, true); 

?> 
<div id="placeholder" style="font-family:Helvetica; max-width:500px; margin:0 0 20px 0;"> 
<div id="player"><iframe width="480" height="274" src="https://www.youtube.com/embed/<?php echo $data['data']['items'][0]['id']; ?>" frameborder="0" allowfullscreen></iframe></div> 
<div class="title" style=" font-size:14px; font-weight:bold; color:#3B5998; margin:2px 0 3px 0;"><?php echo $data['data']['items'][0]['title']; ?> </div> 
<div class="views" style="color:#BBB; font-size:12px;"><?php echo $data['data']['items'][0]['viewCount'];?> views</div> 
<div class="description" style="font-size:14px;"><?php echo $data['data']['items'][0]['description'];?></div> 
<div class="hr" style="padding:5px 0 0 0; float:left; border-bottom: 1px solid #96CC90; width:480px;"></div> 
</div> 
<?php 

foreach($data['data']['items'] as $item) { 
$id = $item['id']; 
$description = $item['description']; 
$description = str_replace('uk.opticalexpress.com', '', $description); 
$description = str_replace('-', '', $description); 
$description = trim($description); 

$thumb = $item['thumbnail']['sqDefault']; 

$i = 0; 
?> 
<div class="video" id="<?php echo $i; ?>" style="font-family:Helvetica; float:left; max-width:150px; min-height:130px; margin:0 0px 20px 10px;"> 
    <div class="thumb" style="position:relative; left:0; top:0;"> 
     <img src="<?php echo $item['thumbnail']['sqDefault'];?>" title="<?php echo $description;?>" style="position:relative; top:0; left:0px;"/> 
     <img src="../images/play-thumb.png" style="position:absolute; top:30px; left:45px;"/> 
    </div> 
    <div class="title" style="font-size:14px; font-weight:bold; color:#3B5998; margin:2px 0 3px 0;"><?php echo $item['title']; ?> </div> 
    <div class="views" style="font-size:12px;"><?php echo $item['viewCount'];?> views</div> 
</div> 

<?php 
$i++; 
} 
?> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('.video').click(function() { 
     var id = $(this).attr('id'); 

     $('#placeholder').fadeOut('slow'); 
     $('#placeholder').html('<div id="player"><iframe width="480" height="274" src="https://www.youtube.com/embed/<?php echo $data['data']['items'][1]['id']; ?>" frameborder="0" allowfullscreen></iframe></div>'); 
     $('#placeholder').fadeIn('slow'); 
    }); 
}); 
</script> 

對不起，文本（和內聯CSS）的牆！

Answer 1

困難...我會用jQuery觀看.video上的點擊事件，然後對服務器上的PHP文件（RESTish）執行GET請求，這會生成iframe所需的HTML，然後設置＃視頻HTML到你剛剛收到的HTML。可能的工作...

另一種可能性，是加載所有的iframe，然後在.video點擊只顯示匹配相同的唯一ID或一些東西。這意味着您的用戶需要更多的加載時間，但最好使用AJAX類型的方法。

Answer 2

你可以通過這樣做來使用ajax，我已經這樣做了，希望這也能適用於你。

<div id="video1" class=".temp"></div> 

<script type="text/javascript"> 

$(document).ready(function() { 
    $('.temp').click(function() { 

     var currentId = $(this).attr('id'); 
     showVideo(currentId); 
    }); 
}; 

function showVideo(str) 
{ 

    if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp=new XMLHttpRequest(); 
    } 
    else 
    {// code for IE6, IE5 
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.onreadystatechange=function() 
    { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) 
     { 
      document.getElementById("VideoFrameDiv").innerHTML=xmlhttp.responseText; 
     } 
    } 
    xmlhttp.open("GET","inc/AjaxOnClickValues.php?id="+str,true); 
    xmlhttp.send(); 
} 
</script>