使用AJAX将自定义字段值加载到div

时间:2018-03-15 作者:M.Arif

我有3个不同的自定义字段url-1, url-2url-3. 每个字段在类型中有不同的值<iframe> 嵌入式视频。

单击任意链接<li> 并播放该视频,默认情况下播放url-1

HTML:

<form  id="myform">
   <li><a name="url-1" class="play_next" href="#"> Link </a></li>
   <li><a name="url-2" class="play_next" href="#"> Link </a></li>
   <li><a name="url-3" class="play_next" href="#"> Link </a></li>
</form>

<div id="output"> video player </div>

Jquery

jQuery(document).ready(function($){
$("#myform").on(\'click\', \'a\', function(e) {

$.ajax({
    url: ajaxobject.ajaxurl,
    type: \'post\',
    data: { 
        action: \'call_meta\', 
    },
    success: function(result) {
        $(\'#output\').append( result );
    }
});
});
});

PHP:

add_action(\'wp_ajax_call_post\', \'call_meta\');
add_action(\'wp_ajax_nopriv_call_post\', \'call_meta\');
 function call_meta(){

if( isset($_POST["pid"]){
   $post = get_post( $_POST["pid"] );
     echo get_post_meta( $ID, \'url-1\', true );
} 
else {
    echo get_post_meta( $ID, \'url-2\', true );
}
else {
    echo get_post_meta( $ID, \'url-3\', true );
}
wp_die();
}

How to load video with Ajax? & play any from others by replacing previous one.

我是wordpress主题开发的新手,所以我知道我的代码中有很多问题和错误。感谢您的关注。我期待着你的答复。

1 个回复
SO网友:Jacob Peattie

首先,POST请求是要发送的错误类型的请求。如上所述here, 职位:

将要处理的数据提交到指定的资源

您应该使用GET

从指定资源请求数据

下一个问题是在回调函数中检查$_POST["pid"], 但你没有发送pid 在您的数据中:

data: { 
    action: \'call_meta\', 
},
因此,回调函数不知道加载哪个URL或从哪个帖子。您需要在发送的数据中包含此信息。

此外,在回调中,您有以下结构:

if () {

} 
else {

}
else {

}
这没有任何意义。第二个else将导致致命错误,因为if语句中只能有一个else。如果需要使用多个条件elseif 或aswitch 陈述

因此,这些问题的解决方案是在请求中包含post ID,并传递您在请求中查找的特定元密钥。我也会考虑将链接更改为语义上更合适的链接<button> 要素

因此,您的HTML应该如下所示:

<ul>
    <li><button class="play_next" data-meta-key="url-1">Video 1</button>
    <li><button class="play_next" data-meta-key="url-2">Video 2</button>
    <li><button class="play_next" data-meta-key="url-3">Video 3</button>
</li>
请注意,我已将相关的元键附加到带有数据属性的按钮。我们将在JavaScript中使用它来发送正确的请求。

那么您的脚本将如下所示:

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

        var meta_key = $( this ).data( \'meta-key\' );

        $.ajax( {
            url: ajaxobject.ajaxurl,
            type: \'get\',
            dataType: \'html\',
            data: { 
                action: \'wpse_296903_call_meta\',
                post_id: 1,
                meta_key: meta_key,
            },
            success: function( result) {
                $( \'#output\' ).append( result );
            }
        } );
    } );
} );
请注意,我有:

使用从按钮中检索到元键$.data(). 有关说明原因的文档,请参见该链接meta-key 在HTML中使用,但metaKey 在jQuery中使用 编辑:抱歉,这只适用于jQuery 3+,但WordPress使用jQuery 1post_id 在请求数据中。我不清楚这是当前的帖子,还是特定的帖子,所以我只是硬编码了一个ID。请澄清一下,我会更新答案\'html\' 这样jQuery就可以可靠地知道响应将是某种HTML现在,在回调函数(我已经重命名了,请参见上面前缀的注释)中,使用post_idmeta_key 在返回适当值的请求中发送:

function wpse_296903_call_meta() {
    // Make sure we have both a post ID and a meta key.
    if( isset( $_POST[\'post_id\'] ) && isset( $_POST[\'meta_key\'] ) {
        $post_id = $_POST[\'post_id\'];
        $meta_key = $_POST[\'meta_key\'];

        // Only proceed if meta key requested is in a whitelist.
        if ( in_array( $meta_key, [\'url-1\', \'url-2\', \'url-3\'] ) ) {
            // Echo meta value.
            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\' );
需要注意的一点是,为了安全起见,为了防止任何人利用此AJAX操作返回任意元,我们将请求中发送的元密钥与要返回值的元密钥白名单进行检查。我不能百分之百确定这有多必要,但不会有什么坏处。

结束

相关推荐

在AJAX调用中收到400个错误请求

我正在使用一个类构建一个自定义的post类型插件。我在页面上有一个表单,它进行AJAX调用,然后返回400个错误请求和0个响应。我试着用邮递员独立于页面拨打电话。还是一样的回答。在构造函数中:add_shortcode(\'websites_form\', [$this, \'renderForm\']); // handle AJAX calls for both logged in and guest users add_action(\'wp_action_websites