AJAX提交表单后仅数据库存储生效，页面数据展示失效问题排查

我开发了一个提交后调用AJAX的表单，期望实现两个功能：一是在当前页面底部表格展示用户输入的信息，二是将信息存入数据库。但目前仅数据库存储操作生效，页面数据展示功能失效。此外，控制台触发了AJAX的错误回调函数，但无明确错误提示。

核心错误原因 #

• 非纯JSON返回导致解析失败：PHP回调函数中，在输出JSON数据后又输出了<script>alert("successfully")</script>，导致返回内容不是纯JSON格式。而AJAX请求指定了dataType: 'json'，jQuery会强制解析返回内容为JSON，非纯JSON结构会直接触发错误回调。
• 选择器错误：JS中计算表格行数的选择器$("tBody > tr")缺少ID前缀，无法正确定位到目标表格的tbody元素。

修正后的代码 #

1. PHP回调函数 #

function sendContactFormDataCallback()
{
    check_ajax_referer('ajax_nonce', 'security');
    $sendData = [];
    parse_str($_POST['userData'], $sendData);

    $returnData = [
        "username" => $sendData['username'],
        "email" => $sendData['email'],
        "password" => $sendData['password']
    ];
    
    global $wpdb;
    $send_to_db = $wpdb->insert("clients", [
        "userName" => $sendData["username"],
        "email" => $sendData["email"]
    ]);
    
    // 将数据库操作结果加入JSON返回数据，不再输出HTML脚本
    $returnData['success'] = $send_to_db ? true : false;

    echo json_encode($returnData);
    wp_die();
}

add_action('wp_ajax_nopriv_sendContactFormData1', 'sendContactFormDataCallback');
add_action('wp_ajax_sendContactFormData1', 'sendContactFormDataCallback');

2. JavaScript代码 #

$('body').on('submit', '#form1', function (e) {
    const fields = $(this).serialize();

    $.ajax({
        url: baseUrl.ajax_url,
        type: 'POST',
        dataType: 'json',
        data: {
            action: 'sendContactFormData1',
            userData: fields,
            security: baseUrl.nonce
        },
        success: function (response) {
            // 修正选择器，加上ID前缀#
            var i = $("#tBody > tr").length + 1;
            $(`<tr>
                <th scope="row">${i}</th>
                <td>${response.username}</td>
                <td>${response.email}</td>
                <td>${response.password}</td>
            </tr>`).appendTo("#tBody");
            
            // 清空表单
            $("#username").val("")
            $("#email").val("")
            $("#password").val("")
            
            console.log(response);
            // 根据返回的状态提示操作结果
            if (response.success) {
                alert("successfully");
            }
        },
        error: function (error) {
            // 打印详细错误信息，便于排查
            console.log('AJAX错误详情:', error.responseText);
        }
    });
    return false;
});

关键修正说明 #

1. 保证纯JSON返回：PHP端移除HTML脚本输出，将数据库操作结果作为JSON字段返回，确保AJAX能正确解析响应内容。
2. 修复选择器：给tbody选择器加上ID前缀#，确保准确获取表格行数。
3. 优化错误排查：在AJAX错误回调中打印error.responseText，可以直接看到服务器返回的原始内容，快速定位问题。

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