WordPress表单提交后foreach内容未刷新，如何重新加载books_array？

方案一：PRG模式（解决重复提交+页面自动刷新） #

这是Web开发中解决表单重复提交的标准方案，核心是提交后重定向回原页面，既避免刷新重复提交，又能让页面重新加载最新的书籍列表。

步骤1：修正表单提交逻辑 #

不要在action里直接调用user_add_new()，改为提交到当前页面，同时添加安全验证nonce：

<form action="<?php echo esc_url(get_permalink()); ?>" method="post">
    <?php wp_nonce_field('mark_book_read', 'read_book_nonce'); ?>
    <?php
    foreach($books_array as $index => $i ) {
        $s = $i->title;
        $o = $i->listID;
        $r = $i->submittedBy;
        $d = $i->bookDESC;
        $t = $i->id;
        $current_user = wp_get_current_user();
        $current_id = $current_user->ID;

        if ($r == $current_user->ID || $r == 'administrator') {
            echo '<div class="user-wrap">';
                echo '<div class="inner-wrap">';
                    echo '<div><span class="check">';
                        echo "<input type='checkbox' name='checkbox[]' value='$index' onChange='this.form.submit()'>";
                        echo "<input type='hidden' name='item$index' value='$t'>";
                        echo "<input type='hidden' name='listID$index' value='$o'>";
                        echo "<input type='hidden' name='userID$index' value='$current_id'>";
                    echo '</span></div>';
                    echo "<div><b>$s</b><br>$d</div>";
                echo '</div>';
            echo '</div>';
        }
    };
    ?>
</form>

步骤2：修改处理函数，添加重定向 #

通过WordPress的init钩子触发处理逻辑，完成插入后重定向回原页面：

add_action('init', 'handle_mark_book_read');
function handle_mark_book_read() {
    // 安全验证：检查nonce和请求方式
    if (!isset($_POST['read_book_nonce']) || !wp_verify_nonce($_POST['read_book_nonce'], 'mark_book_read')) {
        return;
    }
    if ($_SERVER['REQUEST_METHOD'] !== 'POST' || !isset($_POST['checkbox'][0])) {
        return;
    }

    global $wpdb;
    $value = $_POST["checkbox"][0];
    $bookTOadd = $_POST["item" . $value];
    $listTOadd = $_POST["listID" . $value];
    $userID = $_POST["userID" . $value];

    $addTABLE = $wpdb->prefix . 'plugin_read';

    $wpdb->insert(
        $addTABLE,
        array(
            'bookID' => $bookTOadd,
            'userID' => $userID,
            'listID' => $listTOadd,
        )
    );

    // 重定向回原页面，避免刷新重复提交
    wp_safe_redirect(get_permalink());
    exit;
}

提交后页面会自动跳回当前页，重新加载时books_array会获取排除已读书籍的最新数据（需确保books_array的查询逻辑已过滤已读条目），已读条目自然消失。

方案二：AJAX异步提交（无刷新体验） #

如果不想页面刷新，用AJAX提交数据，成功后直接在前端移除对应条目，体验更流畅。

步骤1：修改表单并添加JS逻辑 #

给条目添加标识，通过AJAX异步提交：

<form id="mark-read-form">
    <?php wp_nonce_field('mark_book_read_ajax', 'read_book_nonce'); ?>
    <?php
    foreach($books_array as $index => $i ) {
        $s = $i->title;
        $o = $i->listID;
        $r = $i->submittedBy;
        $d = $i->bookDESC;
        $t = $i->id;
        $current_user = wp_get_current_user();
        $current_id = $current_user->ID;

        if ($r == $current_user->ID || $r == 'administrator') {
            echo '<div class="user-wrap" data-index="' . esc_attr($index) . '">';
                echo '<div class="inner-wrap">';
                    echo '<div><span class="check">';
                        echo "<input type='checkbox' class='mark-read-checkbox' data-index='$index' data-book-id='$t' data-list-id='$o' data-user-id='$current_id'>";
                    echo '</span></div>';
                    echo "<div><b>$s</b><br>$d</div>";
                echo '</div>';
            echo '</div>';
        }
    };
    ?>
</form>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const checkboxes = document.querySelectorAll('.mark-read-checkbox');
    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('change', function(e) {
            if (!this.checked) return;

            const index = this.dataset.index;
            const bookId = this.dataset.bookId;
            const listId = this.dataset.listId;
            const userId = this.dataset.userId;
            const nonce = document.querySelector('#read_book_nonce').value;
            const wrap = this.closest('.user-wrap');

            // 发送AJAX请求
            fetch('<?php echo admin_url('admin-ajax.php'); ?>', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: new URLSearchParams({
                    action: 'mark_book_read_ajax',
                    nonce: nonce,
                    checkbox: [index],
                    ['item' + index]: bookId,
                    ['listID' + index]: listId,
                    ['userID' + index]: userId
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    wrap.remove();
                } else {
                    this.checked = false;
                    alert('标记失败，请重试');
                }
            })
            .catch(error => {
                this.checked = false;
                alert('网络错误，请重试');
            });
        });
    });
});
</script>

步骤2：添加AJAX处理函数 #

add_action('wp_ajax_mark_book_read_ajax', 'handle_mark_book_read_ajax');
add_action('wp_ajax_nopriv_mark_book_read_ajax', 'handle_mark_book_read_ajax'); // 允许未登录用户（按需开启）

function handle_mark_book_read_ajax() {
    // 安全验证
    if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'mark_book_read_ajax')) {
        wp_send_json_error('无效验证');
    }
    if (!isset($_POST['checkbox'][0])) {
        wp_send_json_error('未选择条目');
    }

    global $wpdb;
    $value = $_POST["checkbox"][0];
    $bookTOadd = $_POST["item" . $value];
    $listTOadd = $_POST["listID" . $value];
    $userID = $_POST["userID" . $value];

    $addTABLE = $wpdb->prefix . 'plugin_read';

    $result = $wpdb->insert(
        $addTABLE,
        array(
            'bookID' => $bookTOadd,
            'userID' => $userID,
            'listID' => $listTOadd,
        )
    );

    if ($result) {
        wp_send_json_success('标记成功');
    } else {
        wp_send_json_error('标记失败');
    }
}

额外注意事项 #

1. 过滤已读条目：books_array的查询逻辑必须排除当前用户已标记为已读的书籍，比如在查询时加入WHERE bookID NOT IN (SELECT bookID FROM {$wpdb->prefix}plugin_read WHERE userID = $current_id)。
2. 错误排查：可以在处理函数中添加error_log($wpdb->last_error)，查看数据库插入时的错误信息。
3. 权限控制：根据实际需求，限制未登录用户的操作权限。

内容的提问来源于stack exchange，提问作者CodeChic