WordPress中AJAX响应无法显示成功消息问题求助

以下是针对问题的具体排查方向及修复方案：

1. 确认前端提示元素存在 #

你的AJAX成功回调里使用jQuery('#message').text(data)显示成功消息，但如果页面中不存在id为message的DOM元素，消息自然无法显示。

检查页面模板，确保添加该元素：

<div id="message" style="color: green; margin-top: 10px;"></div>

同时也要确认#valida_error_message和#survey_error_message元素存在，避免错误提示也无法显示。

2. 修复AJAX返回内容的匹配问题 #

PHP中直接echo字符串可能因代码换行、空白字符等导致返回内容与前端判断的字符串不完全一致，使得匹配失败。改用JSON格式返回能彻底解决这个问题：

优化PHP处理函数： #

function vendor_survey_email() {
    global $wpdb;
    $table_name = $wpdb->prefix . 'survey';

    $insert_result = $wpdb->insert( 
        $table_name, 
        array(
            'wtimeliness' => $_POST['timeliness'], 
            'wcourtesy' => $_POST['courtesy'],
            'wquality' => $_POST['quality'],
            'wlogin_name' => $_POST['customername'],
            'wlogin_email' => $_POST['custemail'],
            'storename' => $_POST['sv_storename'],
            'userid' => $_POST['customerid'],
            'wmessage' => $_POST['sv_message']
        ),
        array(
            '%s', '%s', '%s', '%s', '%s', '%s', '%d', '%s'
        )
    );

    // 根据插入结果返回结构化JSON
    if($insert_result) {
        wp_send_json_success(array('message' => 'Message sent successfully'));
    } else {
        wp_send_json_error(array('message' => 'Failed to submit survey'));
    }
    wp_die();
}
add_action('wp_ajax_vendor_survey_form', 'vendor_survey_email');
add_action('wp_ajax_nopriv_vendor_survey_form', 'vendor_survey_email');

对应修改前端AJAX脚本： #

jQuery(document).on('click', '#sv_form', function (e) { 
    // 若#sv_form是表单元素，阻止默认提交行为避免页面刷新
    if(jQuery(this).is('form')){
        e.preventDefault();
    }

    var timeliness = jQuery('input[name="timeliness"]:checked').val();
    var courtesy = jQuery('input[name="courtesy"]:checked').val();
    var quality = jQuery('input[name="quality"]:checked').val();
    var customername = document.getElementById('customername').value;
    var sv_storename = document.getElementById('sv_storename').value;
    var custemail = document.getElementById('custemail').value;
    var customerid = document.getElementById('customerid').value;
    var sv_message = document.getElementById('sv_message').value;
    
    if (timeliness == '' || courtesy == '' || quality == '' ||  sv_message =='' ) {
        jQuery('#valida_error_message').text('*All above Fields are Required');
        jQuery('#message').text('');
        jQuery('#survey_error_message').text('');
    }else {  
        jQuery.ajax({
            url: ajax_url,
            type: "POST",
            dataType: "JSON", // 启用JSON类型解析
            cache: false,
            data: {
                'action':'vendor_survey_form',
                'timeliness' : timeliness,
                'courtesy' : courtesy,
                'quality' : quality,
                'sv_storename' : sv_storename,
                'custemail' : custemail,
                'customername' : customername,
                'customerid' : customerid,
                'sv_message' : sv_message
            },
            success:function(response) {
                if(response.success){
                    jQuery('#message').text(response.data.message);
                    jQuery("form").trigger("reset");
                    jQuery('#valida_error_message').text('');
                    jQuery('#survey_error_message').text('');
                }else{
                    jQuery('#survey_error_message').text(response.data.message);
                    jQuery("form").trigger("reset");
                    jQuery('#message').text('');
                    jQuery('#valida_error_message').text('');
                }
            },
            error: function(errorThrown){
                console.log(errorThrown);
                jQuery('#survey_error_message').text('Server error, please try again later');
            }
        });
    }    
});

3. 确认ajax_url正确赋值 #

WordPress中必须通过官方方式传递AJAX地址，确保你在加载前端脚本时添加了以下代码：

// 注册并本地化脚本
wp_enqueue_script('survey-script', get_template_directory_uri() . '/js/your-survey-script.js', array('jquery'), '1.0', true);
wp_localize_script('survey-script', 'survey_ajax', array(
    'ajax_url' => admin_url('admin-ajax.php')
));

之后前端脚本中把url: ajax_url改为url: survey_ajax.ajax_url，避免地址未定义的问题。

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