React+Axios表单在Safari无法向PHP传输数据至MySQL数据库

问题概述 #

React开发的订阅页面，包含邮箱输入框、国家选择下拉框和提交按钮，通过Axios与PHP交互实现数据存入MySQL。在PC、安卓设备上功能正常，但在MacOS Safari及iOS浏览器中，表单提交无报错，但数据无法写入数据库。

核心问题分析与修复步骤 #

1. 表单默认提交行为未阻止 #

submit按钮点击时会触发form的默认提交事件，导致页面刷新，Axios异步请求被中断。这是Safari中常见的隐性问题，其他浏览器可能对异步请求的中断处理更宽松。

修复方式：

• 在handleSubmit中接收事件参数并调用e.preventDefault()，阻止默认行为；
• 或把按钮type="submit"改为type="button"；
• 推荐绑定form的onSubmit事件而非按钮的onClick，更符合表单语义。

2. 逻辑运算错误（位运算替代逻辑与） #

代码中validate函数使用了单个&（位运算）而非&&（逻辑与），不同浏览器对位运算的处理存在差异，可能导致validate返回错误的布尔值，使得提交按钮状态异常或提交逻辑失效。

修复方式：
将所有位运算&替换为逻辑与&&，并确保validate明确返回布尔值：

const validate = () => {
    return isValidEmail(email) && country !== 'default' && email.length > 0 && country.length > 0;
};

3. FormData兼容性问题 #

Safari对FormData的处理与其他浏览器存在差异，可能导致请求参数无法正确传递到PHP端。

替代方案：
改用JSON格式发送数据，简化请求处理并提升兼容性：

• React端设置Axios请求头为application/json，直接传递JSON对象；
• PHP端通过php://input接收JSON数据。

修改后的完整代码示例 #

React组件代码 #

import { useState } from 'react';
import axios from 'axios';

const SubscribeForm = ({ countrySelect }) => {
    const [email, setEmail] = useState("");
    const [country, setCountry] = useState("default");

    function isValidEmail(email) {
        return /\S+@\S+\.\S+/.test(email);
    }

    const validate = () => {
        return isValidEmail(email) && country !== 'default';
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        
        const url = "URL_TO_PHP_script";
        const data = { email, country };

        axios.post(url, data, {
            headers: { 'Content-Type': 'application/json' }
        })
        .then(response => {
            alert(response.data);
            setEmail("");
            setCountry("default");
        })
        .catch(error => {
            console.error('提交错误:', error);
            alert("订阅失败，请稍后重试");
        });
    }

    return (
        <form onSubmit={handleSubmit}>
            <input
                className='-text-center'
                type="email"
                placeholder="你的邮箱"
                value={email}
                onChange={e => setEmail(e.target.value)}
            />
            {email && !isValidEmail(email) && <span style={{color: 'red'}}>请输入有效的邮箱地址</span>}

            <select 
                className='-text-center'
                value={country}
                onChange={e => setCountry(e.target.value)}
            >
                <option value='default'>选择你的国家</option>
                {countrySelect.map(country => (
                    <option
                        key={country.id}
                        value={country.origin}
                    >
                        {country.origin}
                    </option>
                ))}
            </select>
            {country === 'default' && <span style={{color: 'red'}}>请选择国家</span>}

            <input
                className='-text-center'
                type="submit"
                value='订阅'
                id="submit-sub"
                disabled={!validate()}
            />
        </form>
    );
};

export default SubscribeForm;

PHP后端代码 #

<?php
header('Content-Type: application/json');

// 接收JSON请求数据
$input = file_get_contents('php://input');
$requestData = json_decode($input, true);

if (!$requestData || empty($requestData['email']) || $requestData['country'] === 'default') {
    echo json_encode('请填写完整信息');
    exit;
}

$email = trim($requestData['email']);
$country = trim($requestData['country']);

// 数据库连接与插入操作示例
$conn = new mysqli('localhost', 'username', 'password', 'database');
if ($conn->connect_error) {
    echo json_encode('数据库连接失败');
    exit;
}

$stmt = $conn->prepare("INSERT INTO subscriptions (email, country) VALUES (?, ?)");
$stmt->bind_param("ss", $email, $country);

if ($stmt->execute()) {
    echo json_encode('订阅成功');
} else {
    echo json_encode('订阅失败，请重试');
}

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

额外调试建议 #

• 打开Safari开发者工具（偏好设置-高级-勾选"在菜单栏中显示开发菜单"），查看"网络"面板，确认Axios请求是否发送、请求参数是否正确；
• 在PHP端添加日志记录，检查是否接收到请求数据，排查数据库写入环节的问题。

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