使用HTML表单onsubmit调用JS函数向MySQL添加数据失败求助

原有HTML+PHP代码可在本地XAMPP及服务器正常写入邮箱数据，但表单提交会导致页面跳转至白屏。修改为fetch异步提交后出现两个问题：

• 本地XAMPP环境报错：Scripts.js:36 MyError: SyntaxError: Unexpected token '<', "... is not valid JSON"
• 服务器环境报错：{success: false, error: "Column 'email' cannot be null"}

• 本地报错根源：后端PHP返回的不是合法JSON数据，而是HTML内容（比如PHP执行错误的提示页面、404页面等），前端尝试解析JSON时触发格式错误。
• 服务器报错根源：前端以Content-Type: application/json发送JSON格式数据，但PHP的$_POST仅支持解析application/x-www-form-urlencoded或multipart/form-data格式的请求体，无法直接读取JSON数据，导致$email变量为null，触发数据库非空约束错误。

以下两种方案任选其一即可：

方案1：修改前端JS，发送表单格式数据（适配原有PHP代码） #

将请求改为发送表单编码格式的数据，让后端$_POST["email"]能正常获取值：

function EmailSubmitForm(event) {
    event.preventDefault();
    var email = document.getElementById("EmailInput").value;

    fetch('/process-form.php', {
        method: 'POST',
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        body: new URLSearchParams({email: email})
    })
    .then(response => {
        console.log(response);
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        console.log(data);
        // 可在此添加订阅成功后的UI提示，比如显示"订阅成功"
    })
    .catch((error) => {
        console.log('MyError:', error);
    });
}

方案2：修改后端PHP，接收JSON格式数据 #

若要保留前端发送JSON的方式，需修改PHP代码读取JSON请求体：

<?php
// 读取JSON请求体并解析
$input = json_decode(file_get_contents('php://input'), true);
// 校验JSON解析结果及email参数
if (!$input || !isset($input['email']) || empty($input['email'])) {
    echo json_encode(['success' => false, 'error' => 'Invalid or missing email']);
    exit;
}
$email = $input['email'];

$host = 'localhost';
$dbname = "mydbname";
$username = "myusername";
$password = "mypassword";

$conn = mysqli_connect($host, $username, $password, $dbname);
if (mysqli_connect_error()) {
    // 返回JSON格式的连接错误，避免输出HTML
    echo json_encode(['success' => false, 'error' => 'Connection Failed: '. mysqli_connect_error()]);
    exit;
}

// 修正SQL语法：VALUE改为VALUES
$stmt = $conn->prepare("INSERT INTO Subscriptions (email) VALUES (?)");
$stmt->bind_param("s", $email);

if ($stmt->execute()) {
    echo json_encode(['success' => true]);
} else {
    echo json_encode(['success' => false, 'error' => $stmt->error]);
}

$stmt->close();
$conn->close();
?>

• 确保PHP文件路径正确：本地XAMPP中/process-form.php需对应实际文件位置，避免因404返回HTML导致解析错误。
• 生产环境关闭PHP错误输出：开启错误提示时，错误信息会以HTML格式输出，破坏JSON结构，建议在生产环境关闭，或统一用JSON格式返回错误。
• 前端可添加前置验证：在发送请求前检查邮箱输入是否为空，减少无效请求。

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