jquery - 使用jQuery，WordPress oEmbed和Ajax在div中预览视频

Question

我对jQuery和Ajax都很陌生，并且在尝试使用WordPress在Ajax的帮助下嵌入时遇到了问题。

这就是我目前在functions.php中拥有的内容:

function ajax_magic() 
{
     wp_localize_script( 'function', 'display_videos', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}

function get_video_link()
{
echo wp_oembed_get($_POST['link']);
die();
}

add_action('template_redirect', 'ajax_magic');

add_action('wp_ajax_get_video_link', 'get_video_link');

我的jQuery看起来像这样:

function display_video(input,output)
{
var link = document.getElementById(input).value;
 jQuery.ajax({
     url: display_videos.ajaxurl,
     type: 'POST',
    data:{
      action: 'get_video_link', // this is the function in your functions.php that will be triggered
      url: link
    },
    success: function(data){
      //Do something with the result from server
      $('#'+output).html(data);
    }
  });
}

输入选项是视频的网址， 输出选项包含应在其中回显ajax函数结果的div的ID。

单击预览按钮(而非提交按钮)时，从表单字段中获取视频的url。

目前，什么都没有发生，但是我在Javascript控制台中看不到任何错误。

就像我说的那样，我还很陌生，所以也许我错过了一些非常基本的东西。

顺便说一下，这就是我在functions.php内实现javascript函数文件(general.js)的方式。这行得通，但是也许我需要做另一种方法来使Ajax工作？

function lets_add_scripts() {
wp_register_script('general', get_bloginfo('template_directory') . '/js/general.js', array('jquery'),'', false);
wp_enqueue_script('general');
}
add_action( 'wp_enqueue_scripts', 'lets_add_scripts' );

谢谢您能给我的任何帮助，不胜感激!

// Jens。

Answer 1

您正在尝试使用句柄function本地化不存在的脚本。在其余的代码中，很明显，您的目标是general。不知道为什么要加入template_redirect进行本地化，只需在入队后添加本地化部分:

add_action( 'wp_enqueue_scripts', 'lets_add_scripts' );
function lets_add_scripts() {
    wp_register_script( 'general', get_bloginfo( 'template_directory' ) . '/js/general.js', array( 'jquery' ),'', false );
    wp_enqueue_script( 'general' );
    wp_localize_script( 'general', 'display_videos', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}