Laravel中用Ajax点击保存按钮报错：TypeError: $.POST is not a function

兄弟，这个错误其实是个很容易踩的小坑——JavaScript是严格区分大小写的语言，而jQuery的AJAX POST方法是小写的$.post()，不是你代码里写的大写$.POST()，所以浏览器才会报错说这个函数不存在。

咱们直接修复这个核心问题，顺便优化几个Laravel项目里的细节：

核心修复：方法名大小写调整 #

把代码里的$.POST改成$.post，这是解决当前报错的关键。

补充Laravel必需的CSRF令牌 #

Laravel默认会拦截没有CSRF令牌的POST请求，所以必须在请求参数里加上_token字段，不然你的请求会被后端直接拒绝。

优化代码细节 #

• 变量声明加上let/const，避免全局变量污染；
• 动态生成的表格行里不要用重复的id（比如ename、edit），ID是页面唯一标识，改成class更合理；
• 用模板字符串重构HTML拼接，可读性更强。

修改后的完整代码：

$('form').submit(function (event) {
    event.preventDefault();
    // 声明局部变量，避免全局污染
    let name = $('#name').val();
    let address = $('#address').val();
    let country = $('#country').val();
    
    // 改成小写$.post，同时加入CSRF令牌
    $.post("{{ route('peoples.store') }}", {
        _token: "{{ csrf_token() }}",
        name: name,
        address: address,
        country: country
    }, function (data) {
        // 清空表单
        $('#name').val('');
        $('#address').val('');
        $('#country').val('');
        
        console.log(data);
        // 用模板字符串+class替代重复id，提升代码可读性
        const tr = `
            <tr>
                <td>${data.id}</td>
                <td class="ename">${data.data.name}</td>
                <td class="eaddress">${data.data.address}</td>
                <td class="ecountry">${data.data.country}</td>
                <td>
                    <button class="btn btn-warning edit-btn" data-id="${data.id}">Edit</button>
                    <button class="btn btn-danger delete-btn">Delete</button>
                </td>
            </tr>
        `;
        $('#data').append(tr);
    });
});

额外小提示：如果后端返回的是JSON格式数据，你可以给$.post加上dataType: 'json'参数，确保jQuery正确解析返回结果，示例：

$.post("{{ route('peoples.store') }}", {
    // 请求参数...
}, function (data) {
    // 回调逻辑...
}, 'json');

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