数据库条目在浏览器刷新后意外丢失:Ajax提交后数据未持久化问题解析与修复  第1张

本文详解为何通过ajax提交表单后数据库更新看似成功,但页面刷新时数据却“消失”,核心原因在于php端逻辑存在条件误判与执行顺序缺陷,导致更新操作被跳过;重点提供健壮的条件判断、事务安全写法及前端防重复提交方案。

该问题表面是“刷新后数据丢失”,实则是服务端逻辑未正确持久化变更,而非前端或缓存问题。关键症结在于您当前的 PHP 处理函数 hide_this_by_id() 中,数据库更新语句 $insertdisUr 和 $insertdisId 仅在嵌套的 if (empty($alredyclick3) && $postdVlaue2 == 1) 条件下才被执行,且该条件依赖于 get_user_meta() —— 但请注意:您从未将 'hidden-info' 元字段写入数据库! 您只在满足条件时设置了 $alredyclick3 = 1(纯 PHP 变量赋值),并未调用 update_user_meta()。因此每次刷新后重新执行 Ajax 请求时,get_user_meta('hidden-info') 始终为空,导致更新逻辑反复进入“首次写入”分支,而实际的 $wpdb->update() 调用又因前置条件(如 $labelID4 == 10)未稳定满足而可能被跳过。

此外,代码中存在多处高危隐患:

  • SQL 注入风险:$wpdb->update() 已安全,但原始查询 $query 使用了 prepare(),而后续更新却未统一校验输入;
  • 变量未定义:$this_hide2 和 $hIdedisc2 在返回数组和 JS 判断中使用,但 PHP 中未声明或赋值,导致 JS 逻辑失效;
  • 无错误处理与事务保障:两次 $wpdb->update() 独立执行,若其中一次失败,数据将不一致;
  • 前端未清空表单或禁用提交:WPForms/Contact Form 7 提交后若未重置,用户可能重复触发 Ajax,加剧逻辑混乱。

✅ 正确做法应遵循「明确意图、原子操作、状态可溯」原则:

1. 修正 PHP 后端逻辑(关键修复)
移除对未持久化的 user_meta 的依赖,直接以数据库字段值为判断依据,并确保元字段同步写入:

function hide_this_by_id() {
    check_ajax_referer('swpm_nonce', 'nonce'); // 建议添加 nonce 验证
    global $wpdb;

    if (!is_user_logged_in()) {
        wp_die('Unauthorized');
    }

    $member_id = SwpmMemberUtils::get_logged_in_members_id();
    $this_user = sanitize_text_field($_POST['thisuser'] ?? '');
    $this_num  = intval($_POST['thisnum'] ?? 0);
    $hidebtn2  = intval($_POST['hidebtn2'] ?? 0);

    // 获取当前用户等级(避免重复查询)
    $user_data = $wpdb->get_row($wpdb->prepare(
        "SELECT membership_level FROM {$wpdb->prefix}swpm_members_tbl WHERE member_id = %d",
        $member_id
    ));

    if (!$user_data || $user_data->membership_level != 10) {
        wp_send_json_error(['message' => 'Insufficient permission']);
    }

    // 【核心修复】使用事务确保双字段更新原子性
    $wpdb->query('START TRANSACTION');
    $result1 = $wpdb->update(
        $wpdb->prefix . 'swpm_members_tbl',
        ['this_user' => $this_user],
        ['member_id' => $member_id]
    );
    $result2 = $wpdb->update(
        $wpdb->prefix . 'swpm_members_tbl',
        ['this_id' => $this_num],
        ['member_id' => $member_id]
    );

    if ($result1 === false || $result2 === false) {
        $wpdb->query('ROLLBACK');
        wp_send_json_error(['message' => 'Database update failed']);
    }

    // 【关键新增】持久化标记,防止重复逻辑干扰
    update_user_meta($member_id, 'hidden-info', 1);

    $wpdb->query('COMMIT');

    wp_send_json_success([
        'updated'      => true,
        'userlvlMeta2' => 1,
        'member_id'    => $member_id
    ]);
}
add_action('wp_ajax_hide_this', 'hide_this_by_id');
add_action('wp_ajax_nopriv_hide_this', 'hide_this_by_id'); // 注意:nopriv 场景需另行鉴权

2. 前端增强:防重复 + 状态同步
在 CF7 提交成功后,不仅调用 Ajax,还需重置表单并禁用按钮,避免用户误操作:

if ($('body').is('.page-id-9999, .page-id-1111')) {
    document.addEventListener('wpcf7mailsent', function(event) {
        const form = event.target.closest('form');
        if (form) {
            // 立即禁用提交按钮,防止重复
            form.querySelector('input[type="submit"]').disabled = true;

            // 延迟执行 Ajax(确保邮件已发送)
            setTimeout(() => {
                doAjaxRequest4(1, getthisInfo, getthisInfo2);
            }, 3500);
        }
    });

    // 【强烈建议】Ajax 成功后重置表单
    function doAjaxRequest4(hidebtn2, getthisInfo, getthisInfo2) {
        jQuery.ajax({
            url: ajax_sib_front_object.ajax_url,
            data: {
                action: 'hide_this',
                thisuser: getthisInfo,
                thisnum: getthisInfo2,
                hidebtn2: hidebtn2,
                nonce: ajax_sib_front_object.nonce // 对应 PHP 中的 check_ajax_referer
            },
            dataType: 'json',
            type: 'POST',
            success: function(data) {
                console.log('Update successful:', data);
                // ✅ 关键:重置表单(清除用户输入,避免二次提交)
                const form = document.querySelector('#this_verf_form');
                if (form) form.reset();

                // 更新 UI 状态
                jQuery("#this_col_1").addClass("enable_this");
            },
            error: function(xhr) {
                console.error('Ajax error:', xhr.responseText);
                alert('保存失败,请重试');
            }
        });
    }
}

总结:数据“丢失”的本质是服务端未建立可靠的持久化状态锚点。务必摒弃依赖未写入的临时变量(如 $alredyclick3),转而以数据库字段或 user_meta 为唯一可信源;同时利用数据库事务保障多字段更新一致性,并在前端实施防重复提交与表单重置。如此,无论刷新多少次,数据均稳定留存,直至显式删除。