如何使用Java脚本获取POST字段值?

时间:2018-06-29 作者:Fid

背景:我有一个包含基本网格项目的页面,这些项目是帖子缩略图。由于ESS有一些限制,我想创建一个JS函数,它将获得名为“address1”和“address2”的post元字段。

我已经完成了根据单击的项目获取帖子ID的代码。

$(\'.eg-item-skin-1-element-11\').click(function(e) {

    e.preventDefault();

    var id = $(this).closest(\'li\').attr(\'id\');

    var postId = id.replace(\'eg-1-post-id-\', \'\');

    jQuery(\'.eModal-1\').click();

    console.log(postId);

});
现在我想使用post ID来检索address1address2 发布字段。我读过关于WP REST API的文章,但文档很少。我可以使用API和JS ajax函数来获取这两个值吗?

然后将这些值动态放置到eModal-1 点击后,我就不必为每篇文章创建一个模式,而且每个页面上也不会预加载几十个模式。

1 个回复
最合适的回答,由SO网友:Sally CJ 整理而成

我可以使用API和JS ajax函数来获取这两个值吗?

是的,当然。

Step 1: (PHP) 注册自定义字段(即将它们添加到WordPress REST API响应中Posts)

register_meta( \'post\', \'address1\', [
    \'type\'         => \'string\', // string/boolean/integer/number
    \'single\'       => true,
    \'show_in_rest\' => true,
] );

register_meta( \'post\', \'address2\', [
    \'type\'         => \'string\',
    \'single\'       => true,
    \'show_in_rest\' => true,
] );
请参见Modifying Responses | REST API Handbookregister_meta().

Step 2 (PHP): 加载官方客户端/JS库

add_action( \'wp_enqueue_scripts\', function(){
    wp_enqueue_script( \'wp-api\' );
} );
请参见Backbone JavaScript Client | REST API Handbook.

Step 3: 添加JS代码

…这很简单,如下所示:(请参考您的问题postId 变量)

var post = new wp.api.models.Post( { id: postId } );

post.fetch().done( function(){
    // Use `post.getMeta( \'KEY\' )` to retrieve the meta value.
    alert( post.getMeta( \'address1\' ) );
    alert( post.getMeta( \'address2\' ) );
} );
请参见https://developer.wordpress.org/rest-api/using-the-rest-api/backbone-javascript-client/#model-examples ..

<小时>UPDATE: 替代wp-api 剧本

如果您不想使用官方客户端/JS库,或者只想使用一个简单的jQuery脚本,那么。。。

Step 2:

Don\'t queue/load the wp-api script.

在页面的某个地方添加此项:(可以更改变量名,但请确保在步骤3中也更改JS代码中的变量名)

<script>
var restApiSettings = {
    nonce: \'<?= wp_create_nonce( \'wp_rest\' ) ?>\',
    root: \'<?= esc_url_raw( rest_url( \'wp/v2\' ) ) ?>\'
};
</script>
或者使用PHP/WordPress,使用wp_localize_script() 就像官方客户端/JS库那样。

wp_localize_script( \'your-script\', \'restApiSettings\', [
    \'root\'  => esc_url_raw( rest_url( \'wp/v2\' ) ),
    \'nonce\' => wp_create_nonce( \'wp_rest\' )
] );
Step 3: JS/jQuery代码:

jQuery.get( restApiSettings.root + \'/posts/\' + postId, {
    _wpnonce: restApiSettings.nonce
}, function( res ){
    if ( res.meta ) {
        alert( res.meta.address1 );
        alert( res.meta.address2 );
    }
} );

结束

相关推荐

‘Posts’表不应存储绝对图像路径

我在从网站制作沙盒时遇到了一些困难,其中之一是wordpress正在中注册图像的绝对路径posts.guid 字段:http://example.com/path/image.jpg我认为正确的方法应该是相对路径,即/path/image.jpg因此,如果我复制数据库并尝试在另一个域甚至子域中使用它,图像将不会出现。如何解决这个问题?