WordPress插件中Ajax请求成功后页面自动刷新，如何阻止？

嘿，这个问题我太熟了！页面自动刷新的根源是你点击的按钮触发了表单的默认提交行为——哪怕你写了Ajax请求，浏览器还是会乖乖执行表单提交的默认动作，导致页面刷新。下面给你两种简单有效的解决方案：

方案1：阻止点击事件的默认行为 #

在你的click回调函数里，添加event.preventDefault()来明确阻止浏览器的默认提交动作，代码修改如下：

jQuery(document).ready(function(){
    jQuery("#holiday-submit").click(function(event){
        // 第一步：阻止表单默认提交行为
        event.preventDefault();
        
        // 获取输入的日期（补全你截断的代码）
        var date = jQuery("#holiday-date").val();
        
        // 发起Ajax请求
        jQuery.ajax({
            url: ajaxurl, // WordPress内置的Ajax请求地址
            type: 'POST',
            data: {
                action: 'add_holiday', // 对应你后端注册的Ajax action钩子
                holiday_date: date,
                // 重要：一定要加nonce验证，避免安全风险
                nonce: jQuery('#holiday_nonce').val()
            },
            success: function(response){
                // 显示成功消息
                alert('数据已成功添加！');
                // 可选：清空输入框，提升用户体验
                jQuery("#holiday-date").val('');
            },
            error: function(xhr, status, error){
                console.error('请求出错：', error);
            }
        });
        
        // 也可以用return false替代event.preventDefault()，但后者更精准
        // return false;
    });
});

方案2：修改按钮类型（更简单） #

如果你的按钮是<input type="submit">或者<button type="submit">，直接把按钮的type属性改成button，这样按钮就不会触发表单提交的默认行为了：

<!-- 原来的按钮 -->
<input type="submit" id="holiday-submit" value="添加假期">

<!-- 修改后 -->
<input type="button" id="holiday-submit" value="添加假期">

额外安全提醒（必做） #

在WordPress里使用Ajax，一定要添加nonce验证来防止CSRF攻击：

1. 在你的插件选项页表单里添加nonce字段：

<?php wp_nonce_field('add_holiday_nonce_action', 'holiday_nonce'); ?>

2. 后端处理Ajax请求时验证nonce：

add_action('wp_ajax_add_holiday', 'handle_add_holiday');
function handle_add_holiday(){
    // 验证nonce
    check_ajax_referer('add_holiday_nonce_action', 'nonce');
    
    // 处理数据插入逻辑...
    wp_send_json_success('数据插入成功');
}

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