PHP에서 javaScript 변수를 사용하는 방법은 무엇입니까?

Question

내가 지금 가지고있는 것은 YouTube 채널에서 비디오 정보를 가져온 간단한 Facebook 앱입니다.

이제 YouTube의 응답의 첫 번째 동영상을 제목,보기 및 설명과 함께 자리 표시 자에 포함시키고 모든 동영상 (첫 번째 포함)은 포함 된 동영상을 보유하는 div 아래에 표시됩니다.

그런 다음 사용자가 비디오 축소판 중 하나를 클릭하면 해당 비디오가 자리 표시 자 div에 포함됩니다.

YouTube 연관 배열 내에서 동영상의 ID를 하드 코딩하여 작동하도록 할 수는 있지만 내 jQuery 코드의 마지막 줄에 PHP로 id 변수를 사용하는 방법을 알아낼 수 없습니다.

여기에 내 현재 코드 : 텍스트 (인라인 CSS)의 벽

$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> 

죄송합니다!

Answer 1

난이도 ... jQuery로 .video에서 click 이벤트를보고 나서 iframe에 필요한 HTML을 생성하는 서버 (RESTish)의 PHP 파일에 GET 요청을 수행 한 다음 # 당신이 방금받은 HTML로 비디오 HTML. 작동 할 수도 ...

또 다른 가능성은 모든 iframe을로드 한 다음 .video를 클릭하면 동일한 고유 ID와 일치하는 것을 표시합니다. 이는 AJAX 유형 접근법에 가장 적합한 사용자로드 시간을 늘릴 수 있습니다.

Answer 2

이 작업을 수행하면 아약스를 사용할 수 있습니다.이 방법으로 작업을 마쳤습니다.

<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>