WordPress单页应用POST表单提交后页面刷新致导航丢失求助

问题背景 #

我是新手开发者，正在开发首个基于WordPress的单页应用。用jQuery实现了页面内导航，原本功能正常，但添加POST表单后出现异常：表单提交时，PHP发送POST请求后页面会刷新，导致导航回到应用初始位置，而非用户提交表单前的位置。尝试改用window.location发起GET请求，效果无变化；纯后端导航方案也不理想。

当前代码片段 #

JavaScript

function c_check(div, check, output) {
   if ($(div).hasClass("active") && $(div).prop("innerText") == check) {
     $("#main").load(output);
   };
 };
 $(".side_menu_item").on( "click" , function(){
   $("#Menu1").addClass("active").siblings().removeClass("active");
   $(this).addClass("nav_active").siblings().removeClass("nav_active");
   nav_active = $(this).prop('id');
   if (nav_active == "Account") {
     $("#main").load(profile);
     $("#Menu1").prop("innerText","My Profile");
     $("#Menu2").prop("innerText","My Login Information");
     $("#Menu3").prop("innerText","My Positions");
   } else if .....
});

HTML & PHP

<form method="post">
   <h1>Reset Your Password</h1>
     <input class="editable" type="password" name="old" placeholder="Current password"><br>
     <input class="editable" type="password" name="new" placeholder="New password"><br>
     <input class="editable" type="password" name="new_conf" placeholder="Confirm new password"><br>
     <button name="reset" class="press">Submit</button>
</form>
<?php
  if(isset($_POST['reset'])) {
    echo "<script>nav_active='Account'</script>";
    $old = $_POST['old'];
    $new_conf = $_POST['new_conf'];
    $new = $_Post['new']; // 注意拼写错误：$_Post → $_POST
    if($old == $user_login->User_pass && $new == $new_conf) {
      WP_Query("UPDATE patches_users SET User_Pass=$new WHERE Member_ID=$mid;"); // WP_Query不适合执行更新
      echo "Your password has been reset.";
    }
  }
?>

解决方案核心思路 #

用AJAX异步提交表单，避免页面刷新，从而保留当前导航状态；同时遵循WordPress的AJAX规范处理后端逻辑。

步骤1：修改表单提交逻辑（jQuery） #

阻止表单默认刷新行为，改用AJAX提交：

$('form').on('submit', function(e) {
    e.preventDefault(); // 阻止页面刷新
    var formData = $(this).serialize(); // 序列化表单数据

    $.ajax({
        url: '/wp-admin/admin-ajax.php', // WordPress官方AJAX接口
        type: 'POST',
        data: formData + '&action=reset_password', // 自定义AJAX动作标识
        success: function(response) {
            // 在页面上显示处理结果，不刷新页面
            $('#main').find('.form-message').text(response.message);
            // 导航状态自动保留，无需额外操作
        },
        error: function() {
            $('#main').find('.form-message').text('操作失败，请重试');
        }
    });
});

步骤2：添加WordPress AJAX处理函数（functions.php） #

在主题的functions.php中添加后端处理逻辑，注意遵循WordPress规范：

// 注册AJAX动作，登录用户和非登录用户均可访问（根据需求调整）
add_action('wp_ajax_reset_password', 'handle_reset_password');
add_action('wp_ajax_nopriv_reset_password', 'handle_reset_password');

function handle_reset_password() {
    global $user_login, $mid;
    $response = ['message' => ''];

    if(isset($_POST['reset'])) {
        $old = $_POST['old'];
        $new_conf = $_POST['new_conf'];
        $new = $_POST['new']; // 修正原代码的拼写错误

        // 验证密码一致性
        if($old == $user_login->User_pass && $new == $new_conf) {
            // WordPress密码必须加密存储，使用官方函数wp_hash_password
            $hashed_password = wp_hash_password($new);
            
            // 使用$wpdb操作自定义表，不要用WP_Query（WP_Query用于查询文章）
            global $wpdb;
            $wpdb->update(
                'patches_users',
                ['User_Pass' => $hashed_password],
                ['Member_ID' => $mid],
                ['%s'], // 密码字段格式
                ['%d'] // Member_ID格式
            );

            $response['message'] = '密码已成功重置';
        } else {
            $response['message'] = '密码验证失败，请检查输入';
        }
    }

    // 返回JSON格式响应
    wp_send_json($response);
    wp_die(); // 必须终止AJAX请求，避免额外输出
}

步骤3：修改HTML表单，添加提示区域 #

在表单中增加一个用于显示结果的元素：

<form method="post">
    <h1>Reset Your Password</h1>
    <input class="editable" type="password" name="old" placeholder="Current password"><br>
    <input class="editable" type="password" name="new" placeholder="New password"><br>
    <input class="editable" type="password" name="new_conf" placeholder="Confirm new password"><br>
    <button name="reset" class="press">Submit</button>
    <div class="form-message"></div> <!-- 用于显示处理结果 -->
</form>

原代码问题总结 #

1. 表单默认同步提交导致页面刷新，丢失导航状态
2. 使用WP_Query执行UPDATE操作错误，WP_Query仅用于文章查询，自定义表操作需用$wpdb
3. 密码直接存储明文，违反安全规范，需用wp_hash_password加密
4. 存在拼写错误：$_Post → $_POST

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