Question

我有一个输入字段，其中预期值是youtube链接。我需要这样做，以便一旦youtube链接放入输入，它会自动显示我创建的div（显示视频的缩略图，标题和描述），而无需重新加载页面。

以下是输入的HTML代码以及div需要放置的位置：

<div class="formRow">
  <div class="grid2"><label>Link</label></div>
  <div class="grid10" style="position:relative">
    <input name="link" type="text" placeholder="Link to the video..." />
  </div>
  <div class="clear"></div>
</div>

<!-- THE FOLLOWING PHP CODE CONTAINS THE DIV THAT NEEDS TO BE SHOWN -->
<?php
  $url = $_POST['link'];
  parse_str( parse_url( $url, PHP_URL_QUERY ), $youtube_id );

  define('YT_API_URL', 'http://gdata.youtube.com/feeds/api/videos?q=');

  $video_id = $youtube_id['v'];

  $ch = curl_init();
  curl_setopt($ch, CURLOPT_URL, YT_API_URL . $video_id);
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

  $feed = curl_exec($ch);
  curl_close($ch);

  $xml = simplexml_load_string($feed);

  $entry = $xml->entry[0];

  if(!$entry) { exit('Error: No such video exists.'); }
  $media = $entry->children('media', true);
  $group = $media->group;

  $title = $group->title;
  $desc = $group->description;
  $thumb = $group->thumbnail[0];
  list($thumb_url) = $thumb->attributes();
  $content_attributes = $group->content->attributes();
  $vid_duration = $content_attributes['duration'];
  $duration_formatted = str_pad(floor($vid_duration/60), 1, '0', STR_PAD_LEFT) . ':' . str_pad($vid_duration%60, 1, '0', STR_PAD_LEFT);

  $image = WideImage::load('' . $thumb_url . '');
  $resizedImage = $image->resize(320, 180, 'outside')->crop('center', 'middle', 320, 180);
  $resizedImage->saveToFile("../../assets/video_images/" . $video_id . ".jpg");

  echo '<div class="preview-container">
    <div class="preview-image">
        <img src="../../assets/video_images/' . $video_id . '.jpg" width="185" height="104" />
        <div class="preview-timestamp">' . $duration_formatted . '</div>
    </div>
    <div class="preview-title"><a href="https://www.youtube.com/watch?v=' . $video_id . '">' . $title . '</a></div>
    <div class="preview-desc">' . $desc . '</div>
    <div class="clear"></div>
  </div>';
?>

所以，我需要做的是，一旦将youtube链接放入输入字段，它应该自动显示在PHP代码中回显的div而不刷新页面（使用AJAX等）。

请帮忙。

Answer 1

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
 $('input[name=link]').blur(function(){
  $.ajax({
            type: "POST",
            url: "get_video.php",
            data: { link: $(this).val() },
            success:function( v ) {
                        $('#video').html(v);
                    }
        });
 });
});
</script>

<div class="formRow">
  <div class="grid2"><label>Link</label></div>
  <div class="grid10" style="position:relative">
    <input name="link" type="text" placeholder="Link to the video..." />
  </div>
  <div class="clear"></div>
</div>
<div id="video"></div>

请尝试这个...我使用了“模糊”功能，因此您需要在粘贴YouTube链接后点击外部文本框或按“标签”按钮。

Answer 2

取决于您想要触发ajax调用的内容

$('input[name=link]').on('blur', function(){ 
  $.ajax({
    url: "test.html",
    context: document.body,
    success: function(data){
      //your ajax content is in the data var
    }
  });
});

如果满足输入值则显示div而不重新加载页面

2 个答案: