Laravel+AJAX项目遇Uncaught SyntaxError语法错误求助

错误原因分析 #

• URL未加引号：Laravel的{{ route('add') }}会生成字符串形式的URL，但JS对象中字符串类型的属性值必须用引号包裹，否则会被识别为无效标识符，直接触发语法错误。
• HTML实体转义错误：JS字符串内的"是HTML实体，JS无法正确解析，需改用JS原生的引号转义方式。

修正后的代码 #

<script>
$(document).ready(function() {
    $(document).on('click','.add_product', function(e) {
        e.preventDefault();

        let name= $('#name').val();
        let price= $('#price').val();

        $.ajax({
            url: "{{ route('add') }}", // 给URL添加双引号，确保JS识别为字符串
            method: 'post',
            data: {name:name, price:price},
            // Laravel POST请求必须携带CSRF令牌，需添加此头部
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(res) { 
                // 可在此添加成功后的处理逻辑，比如清空表单、提示操作成功等
            },
            error: function(err) {
                let error = err.responseJSON;
                // 先清空错误容器，避免重复追加错误信息
                $('.errMsgContainer').empty();
                $.each(error.errors, function(index, value) {
                    // 改用JS原生引号写法，替换HTML实体转义符
                    $('.errMsgContainer').append('<span class="text-danger">'+ value+ '</span>' + '<br>');
                });
            }
        });
    });
});
</script>

额外注意事项 #

• 确保页面头部已添加CSRF令牌元标签：<meta name="csrf-token" content="{{ csrf_token() }}">，否则POST请求会被Laravel拦截。
• 每次触发错误回调时先清空错误容器，避免多次点击后错误信息重复堆积。

内容的提问来源于stack exchange，提问作者Moises Leandro Gonzalez Diaz