MySQL 插入操作后通过 AJAX 正确接收 PHP 返回的 JSON 响应-js教程-PHP中文网

MySQL 插入操作后通过 AJAX 正确接收 PHP 返回的 JSON 响应

本文详解如何在 mysql 数据插入成功后，通过 php 后端正确返回结构化 json 数据，并由 jquery ajax 成功解析响应，解决“数据已插入但前端收不到返回消息”的常见问题。

本文详解如何在 mysql 数据插入成功后，通过 php 后端正确返回结构化 json 数据，并由 jquery ajax 成功解析响应，解决“数据已插入但前端收不到返回消息”的常见问题。

在 Web 开发中，AJAX 与 PHP 的异步通信依赖于一致的数据格式约定。你当前的问题核心在于：PHP 脚本 add_user.php 仅使用 echo $res; 输出纯文本（如 "200"），而前端 AJAX 的 success 回调默认将响应体按 text/plain 解析，无法直接访问 data.message —— 因为该属性仅在响应是合法 JSON 且 Content-Type 正确时才可用。

✅ 正确做法：统一使用 JSON 格式通信

1. PHP 后端：返回标准 JSON 响应

修改 add_user.php 中的 adduser() 方法，构建关联数组并调用 json_encode()，同时显式设置响应头：

function adduser()
{
    $response = [];

    // ✅ 使用预处理语句防止 SQL 注入（强烈推荐替代拼接字符串）
    $stmt = $this->dbconn->prepare(
        "INSERT INTO `users` 
         (`WEB_USERNAME`, `WEB_USERPASSWORD`, `USER_TYPE`, `NAME`, `IMAGE`, `TELEPHONE`, `MOBILE`, `ADDRESS`, `PIN`, `EMAIL`, `GENDER`, `DATE_OF_BIRTH`, `STATUS`) 
         VALUES (?, ?, ?, ?, NULL, ?, ?, ?, ?, ?, ?, ?, ?)"
    );

    $stmt->bind_param(
        "ssisssssssssi",
        $this->username,
        $this->password,
        $this->account_type,
        $this->name,
        $this->telephone,
        $this->mobile,
        $this->address,
        $this->pincode,
        $this->email_user,
        $this->gender,
        $this->dob,
        $this->status
    );

    if ($stmt->execute()) {
        $response['status'] = 'success';
        $response['message'] = 'User added successfully';
        $response['insert_id'] = $stmt->insert_id; // 可选：返回新记录 ID
    } else {
        $response['status'] = 'error';
        $response['message'] = 'Error adding user: ' . $stmt->error;
    }

    $stmt->close();
    return json_encode($response);
}

// ? 在脚本末尾输出 JSON，并设置正确的 Header
header('Content-Type: application/json; charset=utf-8');
echo $admin->adduser();
exit;

⚠️ 重要安全提醒：原始代码中直接拼接 $_POST 参数到 SQL 是严重安全隐患（SQL 注入）。上例已改用 mysqli::prepare() + bind_param()，务必采用此方式。

Comprehensive Three.js 3D graphics reference
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。

下载

2. 前端 AJAX：明确指定 `dataType: 'json'`

更新 JavaScript，添加 dataType: 'json' 并增强错误处理逻辑：

$(document).ready(function () {
    $('#data_form').on('submit', function (e) {
        e.preventDefault(); // ❗ 阻止表单默认提交行为

        const formData = $(this).serialize();

        $.ajax({
            type: 'POST',
            url: '../../../controller/add_user.php',
            data: formData,
            dataType: 'json', // ✅ 显式声明期望 JSON 响应
            cache: false,
            success: function (data) {
                console.log('Server response:', data);
                if (data.status === 'success') {
                    alert(data.message);
                    $('#data_form')[0].reset(); // 可选：清空表单
                } else {
                    alert('Error: ' + data.message);
                }
            },
            error: function (xhr, status, error) {
                console.error('AJAX Error:', status, error);
                // 若 PHP 返回 JSON 错误（如语法错误），可能触发此分支
                try {
                    const errData = JSON.parse(xhr.responseText);
                    alert('Server error: ' + (errData.message || 'Unknown error'));
                } catch {
                    alert('Network or server error occurred.');
                }
            }
        });
    });
});

3. 关键注意事项总结

dataType: 'json' 不可省略：否则 jQuery 不会自动解析 responseText 为对象，data.message 将报 undefined。
必须 header('Content-Type: application/json')：确保浏览器和 jQuery 正确识别响应类型。
禁止 echo 多余内容：PHP 文件中 json_encode() 前后不能有 echo、var_dump() 或空白输出，否则 JSON 解析失败。
始终 exit 或 die 在输出后：避免意外输出干扰 JSON 结构。
验证输入 & 处理空值：如 $telephone = null，需在绑定参数前转换为 NULL（使用 is_null() 判断并传入 null）。