这是一个在前端呈现一些项目的简单示例，这些项目使用AJAX触发后端的更改，并根据该响应更新UI。

还有其他examples 让脚本排队，所以只需阅读AJAX，并将其视为一个高级视图。

REGISTER AJAX/SCRIPTS/CSS

add_action(\'init\', function () {

    // Register AJAX handlers

    add_action(\'wp_ajax_set_pending_item_state\', \'set_pending_item_state\');
    add_action(\'wp_ajax_nopriv_set_pending_item_state\', \'set_pending_item_state\');

    // AJAX handler (PRIV / NO PRIV)

    function set_pending_item_state()
    {
        if( empty ($_POST[\'action\']) || $_POST[\'action\'] !== \'set_pending_item_state\') {
            if (!empty ($fail_message)) {
                wp_send_json_error(array(
                    \'message\' => "Sorry!"
                )); // die
            }
        }

        $id = $_POST[\'id\'];
        $state = $_POST[\'state\'];

        wp_send_json_success(array(
            \'action\' => $_POST[\'action\'],
            \'message\' => \'State Was Set To \' . $state,
            \'state\' => $state,
            \'ID\' => $id
        )); // die
    }
});

add_action(\'wp_footer\', function () { ?>

    <style>
        .pending-form,
        .pending-list,
        .pending-list-item {
            display: block;
            color:grey;
        }

        .pending-accept {
            color:green;
        }
        .pending-reject {
            color:red;
        }

        .pending-list-item[data-state="0"] {
            color:inherit;
        }
        .pending-list-item[data-state="-1"] .title {
            color:red;
        }
        .pending-list-item[data-state="1"] .title {
            color:green;
        }
    </style>
    <script>
        (function ($) {

            var $form = $(\'.pending-form\'),
                $item = $form.find( \'.pending-list-item\');

            // Trigger to make AJAX call to set state for ID
            // ( 1:accept, -1:reject )
            function setState(id, state) {

                // item clicked
                var $item = $(\'.pending-list-item[data-id="\' + id + \'"]\'),

                // gather data
                    data = {
                        action: \'set_pending_item_state\',
                        id:      id,
                        state:   state
                    };

                // make AJAX POST call    
                $.ajax({
                    type: \'POST\',
                    url: ajaxurl,
                    data: data,
                    success: function (response) {

                        // look at the response

                        if (response.success) {

                            // update the UI to reflect the response
                            $item.attr (\'data-state\', state);

                            // succcess data
                            console.log(response.data);

                        } else {

                            // no good
                            console.log(response);
                        }
                    }
                });
            }

            // setup the items
            $item.each (function (inx, item){

                var $item = jQuery(item),
                    $acceptBtn = $item.find (\'.pending-accept\'),
                    $rejectBtn = $item.find (\'.pending-reject\');

                // setup the button click handlers

                $acceptBtn.on (\'click\', function(){
                    var id = $item.attr (\'data-id\');
                    setState( id, 1);
                });

                $rejectBtn.on (\'click\', function(){
                    var id = $item.attr (\'data-id\');
                    setState( id, -1);
                });
            });

        })(jQuery);
    </script>
<?php });

RENDER FORM

<div class="pending-form">
<?php
    $pending_talk_list = array(
        array( \'id\' => \'313\',  \'title\'=> \'This is a title1\', \'speaker\' => \'some person1\', \'abstract\' => \'12sdlfjskdfjsdfl\', \'state\' => 0),
        array( \'id\' => \'252\',  \'title\'=> \'This is a title2\', \'speaker\' => \'some person1\', \'abstract\' => \'23sdlfjskdfjsdfl\', \'state\' => 0),
        array( \'id\' => \'344\',  \'title\'=> \'This is a title3\', \'speaker\' => \'some person2\', \'abstract\' => \'45sdlfjskdfjsdfl\', \'state\' => 0),
        array( \'id\' => \'421\',  \'title\'=> \'This is a title4\', \'speaker\' => \'some person3\', \'abstract\' => \'67sdlfjskdfjsdfl\', \'state\' => 0),
    );

    echo "<h1>Pending Talks</h1>";

    echo "<ul class=\'pending-list\'>"; // pending list

    foreach($pending_talk_list as $inx => $talk ) {

        $title = $talk[\'title\'];
        $speaker = $talk[\'speaker\'];
        $abstract = $talk[\'abstract\'];
        $state = $talk[\'state\'];
        $id = $talk[\'id\'];

        echo "<li class=\'pending-list-item\' data-state=\'{$state}\' data-id=\'{$id}\'><div class=\'title\'>{$title}</div><div class=\'speaker\'>{$speaker}</div><div class=\'abstract\'>{$abstract}</div><a class=\'pending-accept\'>accept</a><a class=\'pending-reject\'>reject</a></li>";
    }

    echo "</ul>"; // end pending list
?>
</div>