Laravel项目用AJAX提交购物车数据报Uncaught TypeError如何解决

问题原因排查 #

你的报错完全指向AJAX参数序列化阶段失败，所以请求根本没有触发，Network面板自然没有记录，核心问题有3个：

• 最直接的报错原因：JS中获取商品数量的代码逻辑错误
• Laravel POST请求缺少必填的CSRF令牌，即使第一个问题修复后也会请求失败
• 按钮为submit类型，若处于form标签内会触发默认表单提交，打断AJAX请求

具体修复方案 #

1. 修正商品数量获取逻辑 #

你写的var quantity = $('#qty').val(1);是给输入框赋值为1，返回值是jQuery对象而非数值，把jQuery对象传入AJAX参数会导致序列化失败，修改为：

// 读取输入框的值，为空默认取1
var quantity = $('#qty').val() || 1;

2. 补充CSRF令牌校验 #

Laravel默认对所有POST请求做CSRF校验，你需要先在页面head标签中添加令牌meta：

<meta name="csrf-token" content="{{ csrf_token() }}">

然后在AJAX请求中添加请求头配置：

$.ajax({
    type: "POST",
    dataType: 'json',
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    data:{
        color:color, size:size, quantity:quantity, product_name:product_name
    },
    url: "/cart/data/store/"+id,
    success:function(data){
        console.log(data)
    },
    // 可选：添加错误回调方便后续调试
    error: function(xhr) {
        console.error('请求错误：', xhr.responseText);
    }
})

3. 阻止按钮默认提交行为 #

把按钮的type从submit改为button，避免触发默认表单提交：

<button type="button" class="btn btn-primary mb-2" onClick="addToCart()" >Add to Cart</button>

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