使用AJAX提交结账表单无响应问题求助

嘿，我帮你排查出了几个核心问题，正是这些问题导致表单被清空但数据没写入数据库：

问题1：表单默认提交行为未阻止 #

点击提交按钮时，浏览器会自动触发表单的默认提交动作（刷新页面），这会直接打断AJAX请求，导致数据还没发送到后端就清空了表单。

问题2：AJAX数据拼接语法错误 #

你的data_string里有两处明显错误：

• '&expired_month' + expired_month 应该是 '&expired_month=' + expired_month（缺少赋值的等号，参数无法正确传递）
• '&zip' + zip_code 应该是 '&zip_code=' + zip_code（变量名和表单字段名不匹配，同时缺少等号）

问题3：PHP的触发条件不满足 #

你在PHP里用isset($_POST['submit'])判断是否执行插入逻辑，但AJAX请求里并没有传递submit参数，所以这段插入代码永远不会被执行。

修改后的完整代码： #

1. HTML部分（修正无效属性）

<div class="container-fluid"> 
    <h3 class="alert alert-success" align="center">CHECKOUT FORM</h3> 
    <form id="checkout_form"> 
        <div class="row"> 
            <div class="col-md-2"> </div> 
            <div class="col-md-4"> 
                <div class="form-group"> <label for="usr">Name:</label> <input type="text" class="form-control" id="name" name="name"> </div> 
                <div class="form-group"> <label for="email">Email:</label> <input type="text" class="form-control" id="email" name="email"> </div> 
                <div class="form-group"> <label for="address">Address:</label> <input type="text" class="form-control" id="address" name="address"> </div> 
                <div class="form-group"> <label for="city">City:</label> <input type="text" class="form-control" id="city" name="city"> </div> 
                <div class="form-group"> <label for="city">State:</label> <input type="text" class="form-control" id="state" name="state"> </div> 
            </div> 
            <div class="col-md-4"> 
                <div class="form-group"> <label for="card">Card Name:</label> <input type="text" class="form-control" id="card_name" name="card_name"> </div> 
                <div class="form-group"> <label for="cvv">CVV:</label> <input type="text" class="form-control" id="cvv" name="cvv"> </div> 
                <div class="form-group"> <label for="card_num">Card Number:</label> <input type="text" class="form-control" id="card_number" name="card_number"> </div> 
                <div class="form-group"> <label for="expired_month">Expire Month:</label> <input type="text" class="form-control" id="expired_month" name="expired_month"> </div> 
                <div class="form-group"> <label for="zip">Zip Code:</label> <input type="text" class="form-control" id="zip_code" name="zip_code"> </div> 
                <input type="submit" name="submit" class="btn btn-success" value="CHECKOUT" id="submit"> 
            </div> 
        </div> 
    </form> 
</div>

（注：移除了submit按钮上无效的action属性，action属于form标签的属性，这里不需要单独设置）

2. JavaScript部分（阻止默认行为+修正数据传递）

<script> 
$(document).ready(function(){ 
    $('#submit').click(function(e){ 
        // 阻止表单默认提交，避免页面刷新打断AJAX
        e.preventDefault();
        
        var name = $('#name').val(); 
        var email = $('#email').val(); 
        var address = $('#address').val(); 
        var city = $('#city').val(); 
        var state = $('#state').val(); 
        var card_name = $('#card_name').val(); 
        var cvv = $('#cvv').val(); 
        var card_number = $('#card_number').val(); 
        var expired_month = $('#expired_month').val(); 
        var zip_code = $('#zip_code').val(); 

        // 修正数据拼接错误，同时加入submit参数满足PHP判断条件
        var data_string = 'name='+ name + '&email=' + email + '&address=' + address + '&city=' + city + '&state=' + state + '&card_name=' + card_name + '&cvv=' + cvv + '&card_number=' + card_number + '&expired_month=' + expired_month + '&zip_code=' + zip_code + '&submit=1'; 
        
        $.ajax({ 
            url : "action1.php", 
            method : "POST", 
            data : data_string, 
            success:function(data){ 
                $('#checkout_form').html("<div id='message' class='alert alert-success'></div>"); 
                $('#message').text(data); // div元素用text()而非val()
            },
            error: function(xhr, status, error) {
                // 增加错误日志，方便调试AJAX请求问题
                console.log("AJAX请求出错: " + error);
            }
        }); 
    }); 
}); 
</script>

3. PHP部分（增加错误调试）

<?php 
include('database_connection.php'); 
if(isset($_POST['submit'])){ 
    $data = array( 
        ':name' => $_POST['name'], 
        ':email' => $_POST['email'], 
        ':address' => $_POST ['address'], 
        ':city' => $_POST['city'], 
        ':state' => $_POST['state'], 
        ':card_name' => $_POST ['card_name'], 
        ':cvv' => $_POST['cvv'], 
        ':card_number' => $_POST['card_number'], 
        ':expired_month' => $_POST['expired_month'], 
        ':zip_code'=> $_POST['zip_code'] 
    ); 

    $query = "INSERT INTO checkout (name,email,address,city,state,card_name,cvv,card_number,expired_month,zip_code) VALUES (:name,:email,:address,:city,:state,:card_name,:cvv,:card_number,:expired_month,:zip_code)"; 
    $statement = $connect->prepare($query); 
    if($statement->execute($data)) { 
        echo "Form submitted successfully!"; 
    } else {
        // 输出数据库执行错误，方便排查字段匹配、权限问题
        print_r($statement->errorInfo());
    } 
} 
?>

额外排查建议： #

1. 打开浏览器开发者工具（F12），切换到Network标签，点击提交按钮后查看AJAX请求的状态、传递的参数和后端响应内容。
2. 确认database_connection.php里的数据库连接信息正确，且数据库用户拥有INSERT权限。
3. 检查checkout表的字段是否和插入语句中的字段完全匹配（字段名、数据类型、长度限制等）。

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