如何通过jQuery AJAX POST方法提交表格数据到PHP并存入MySQL

前端代码修正 #

现有代码存在一处明显笔误，修改后可正常传参：

// 原代码prenom取值错误，改为取#prenom表单值
var nom = $("#nom").val();
var prenom = $("#prenom").val();

var tab = [];

$(".choosed").each((index,elem)=> {
    tab.push($(elem).attr("alt"));
})

$.ajax({
    type: "POST",
    url: "gamay.php",
    // 已定义的nom、prenom变量可以直接复用，无需重复取val
    data:{
        nom: nom,
        prenom: prenom,
        service: $("#service").val(),
        choix: tab,
        demande: $("#demande").val()
    },
    // 若后端返回JSON格式结果，可新增dataType配置简化解析
    dataType: 'json',
    success: function(response){
        // 可先打印返回结果确认存库状态
        // console.log(response)
        $(".box").hide();
        $(this).attr("disabled",false);
        $(".formations").removeClass("btn-primary");    
        $(".formations").addClass("btn-secondary"); 
        $(".formations").removeClass("choosed");
        $(".box2").toggleClass("transform-active");
        
        $("#saveName").fadeIn(500);
        $("#successDiv").show();
        $('html,body').animate({ scrollTop: 0 }, 'slow');
    },
    error : function() {
        alert("KO")
    }
});

jQuery会自动将choix对应的数组转换为PHP可识别的choix[]参数格式，无需额外序列化处理。

后端gamay.php处理逻辑 #

1. 接收前端参数 #

直接通过$_POST全局变量接收所有参数，数组类型的choix会自动解析为PHP数组：

<?php
// 接收参数，为空时设置默认值避免报错
$nom = $_POST['nom'] ?? '';
$prenom = $_POST['prenom'] ?? '';
$service = $_POST['service'] ?? '';
$choix = $_POST['choix'] ?? [];
$demande = $_POST['demande'] ?? '';

2. 数据存入MySQL #

推荐使用PDO预处理语句操作数据库，避免SQL注入风险。数组类型的choix可根据业务需求选择存储方式：

• 仅需归档存储：将数组转为JSON字符串存入单个字段
• 需要单独查询每个选择项：拆分数据存入关联表

以下为JSON存储的示例代码：

// 连接数据库，替换为实际的数据库配置
$pdo = new PDO('mysql:host=localhost;dbname=你的数据库名;charset=utf8mb4', '数据库用户名', '数据库密码');
// 数组转JSON字符串，保留中文不转义
$choixJson = json_encode($choix, JSON_UNESCAPED_UNICODE);
// 预处理SQL语句，替换为实际表名和字段名
$stmt = $pdo->prepare("INSERT INTO 你的表名 (nom, prenom, service, choix, demande) VALUES (?, ?, ?, ?, ?)");
$saveRes = $stmt->execute([$nom, $prenom, $service, $choixJson, $demande]);

// 给前端返回操作结果
echo json_encode([
    'code' => $saveRes ? 200 : 500,
    'msg' => $saveRes ? '保存成功' : '保存失败'
]);
?>

调试方法 #

如果出现参数异常，可先在gamay.php顶部加入var_dump($_POST);，同时在前端AJAX的success回调中打印response，确认参数接收正常后再开发存库逻辑。

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