将元框值加载到div中

Question

我正在尝试从自定义字段值(即嵌入式</code>)加载视频。单击任意按钮并播放该视频。</div><blockquote><div><strong>Console日志：</strong>当我单击任何按钮时，它会转到jquery <code>console.log(result);</code>。不提供与按钮相关的输出。</div></blockquote><div><strong>What缺失及如何使其工作？</strong></div><div><strong>HTML:</strong></div><pre><code><ul> <li><button class="play_next" data-meta-key="url-1">Video 1</button></li> <li><button class="play_next" data-meta-key="url-2">Video 2</button></li> <li><button class="play_next" data-meta-key="url-3">Video 3</button></li> </ul></code></pre><div><strong>Jquery:</strong></div><pre><code>jQuery( document ).ready( function( $ ) { $( '.play_next' ).on('click', function( event ) { event.preventDefault(); var meta_key = $( this ).data( 'metaKey' ); var post_id = $( this ).data( 'post_id' ); $.ajax( { url: ajaxobject.ajaxurl, type: 'get', dataType: 'html', data: { action: 'wpse_296903_call_meta', meta_key: meta_key, post_id: post_id, }, success: function( result) { $( '#output' ).append( result ); console.log(result); } }); }); });</code></pre><div><strong>PHP:</strong></div><pre><code>function wpse_296903_call_meta() { if( isset( $_POST['post_id'] ) && isset( $_POST['meta_key'] )) { $post_id = $_POST['post_id']; $meta_key = $_POST['meta_key']; if ( in_array( $meta_key, ['url-1', 'url-2', 'url-3'] ) ) { echo get_post_meta( $post_id, $meta_key, true ); } } wp_die(); } add_action( 'wp_ajax_wpse_296903_call_meta', 'wpse_296903_call_meta' ); add_action( 'wp_ajax_nopriv_wpse_296903_call_meta', 'wpse_296903_call_meta' );</code></pre><div><strong>Enqueue_script:</strong></div><pre><code>if ( ! function_exists( 'cf_enqueue_scripts' ) ) : function cf_enqueue_scripts() { wp_deregister_script( 'jquery' ); wp_enqueue_script( 'jquery', get_template_directory_uri() . '/js/jquery.min.js'); wp_deregister_style( 'style' ); wp_enqueue_style( 'style', get_bloginfo('stylesheet_url')); wp_enqueue_script( 'script', get_template_directory_uri() . '/js/ajax.js'); wp_localize_script('script', 'ajaxobject', array( 'ajaxurl' => admin_url('admin-ajax.php') )); } add_action( 'wp_enqueue_scripts', 'cf_enqueue_scripts' );</code></pre>

Answer 1

1. 为post id添加数据属性data-post-id。例如：

HTML:

    Video 1
    ...

1. 缺少js中的数据属性。$( this ).data( 'metaKey' );应该是$( this ).data( 'meta-key' );，$( this ).data( 'post_id' );应该是$( this ).data( 'post-id' );。

Jquery:

jQuery( document ).ready( function( $ ) {
    $( '.play_next' ).on('click', function( event ) {
        event.preventDefault();

        var meta_key = $( this ).data( 'meta-key' );
        var post_id = $( this ).data( 'post-id' );
        ...
    });
});

1. 使用$_GET或$_REQUEST代替$_POST。

PHP:

function wpse_296903_call_meta() {
if( isset( $_GET['post_id'] ) && isset( $_GET['meta_key'] )) {
    $post_id = $_GET['post_id'];
    $meta_key = $_GET['meta_key'];
    ...
}
wp_die();
}

Additional注释

• 在使用Ajax时添加nonce。
• 消毒输入