Javascript WordPress使用post类型和选择框更改div内容

我正在尝试为WordPress创建一个插件，创建一个自定义的帖子类型。还创建了一个小部件，用户可以将其放在站点上。小部件希望在下拉选择框中列出每篇文章的标题。当选定的标题更改时，相对帖子中的内容希望填充到小部件中选择框下方的div中

我已经创建了post类型和小部件。小部件正在成功创建下拉菜单。我很难用相关内容更新div。我最初试图通过运行PHP post循环来实现这一点，并将所有内容添加到一个数组中，但我意识到这太麻烦了。我认为AJAX是我最好的解决方案，但是我没有这方面的经验，也找不到一个有用的例子

<select id="optionToggle">
    <option value="default">Select a option</option>
    <option value="196">Option 1</option>
    <option value="197">Option 2</option>
    <option value="198">Option 3</option>
    <option value="199">Option 4</option>
    <option value="201">Option 5</option>
</select>
<div class="content"></div>

以上是我目前正在构建的内容，其值为post ID，选项为post title。我有一个javascript函数，它在optionToggle发生更改时侦听，然后获取值。据我所知，WordPress似乎有一个集成的AJAX功能，可以从给定的帖子ID中获取内容，而无需重新加载页面，但我无法理解这一点

---

有没有人有过这样的经验可以帮上忙？

你可以这样做

通过一些操作触发AJAX请求，说出您的\u AJAX\u action\u名称。在参数中传递Post ID。在更改事件处理程序下

您需要在functions.php文件中添加操作

add_action("wp_ajax_YOUR_AJAX_ACTION_NAME", "YOUR_FUNCTION_NAME");

function YOUR_FUNCTION_NAME(){
    if( isset( $_POST['post_id'] ) && $_POST['post_id'] ){
        $content_post = get_post( $_POST['post_id'] );
        $content = $content_post->post_content;
        echo $content;
        die();
    }
}

添加\u actionwp\u ajax\u您的\u ajax\u ACTION\u名称、您的\u函数\u名称

函数你的函数名{ //你的密码在这里 //从ajax请求中获取Post ID。 //从Post ID获取Post内容。 //附和内容。 }

在js文件的AJAX响应处理程序中，编写jQuery代码来更新所需DIV的内容

我希望您现在可以自己编写代码

这是您可以使用的代码

选择更改事件处理程序的代码

var ajax_data = {
                action: 'YOUR_AJAX_ACTION_NAME',
                post_id: jQuery("#optionToggle").val();
        };

jQuery.post(ajaxurl, ajax_data, function( response ) {

    jQuery("#YOUR-DIV-ID").html( response );
});

将代码添加到functions.php文件

add_action("wp_ajax_YOUR_AJAX_ACTION_NAME", "YOUR_FUNCTION_NAME");

function YOUR_FUNCTION_NAME(){
    if( isset( $_POST['post_id'] ) && $_POST['post_id'] ){
        $content_post = get_post( $_POST['post_id'] );
        $content = $content_post->post_content;
        echo $content;
        die();
    }
}

如果在任何情况下您希望未登录的用户使用AJAX，您可以添加

add_action("wp_ajax_nopriv_YOUR_AJAX_ACTION_NAME", "YOUR_FUNCTION_NAME");

您可以在这里了解更多信息：