如何通过jQuery AJAX调用Laravel路由控制器函数提交表单

已实现阻止表单默认提交，但无法通过jQuery AJAX正确指定Laravel路由的请求地址，相关代码如下：

表单代码 #

<form id="sendlike" class="d-inline ms-5">
    <input type="hidden" name="like" id="likeInput">
    <input type="hidden" value="{{$amv->id}}" id="amvid">
    <button class="btn btn-outline-primary" id="like">Like {{$amv->like}}</button>
</form>

jQuery代码 #

var like = document.getElementById("like");
var dislike = document.getElementById("dislike");
like.addEventListener("click", function() {
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    var likecount = like.textContent;
    var amvid = document.getElementById("amvid").value;
    var addlike = parseInt(likecount.slice(5)) + 1;
    document.getElementById("likeInput").value = addlike;
    console.log("localhost:8000/amvtube/like/" + amvid)
    // $("#sendlike").submit();
});
$("#sendlike").on("submit", function (e) {
    e.preventDefault();
    var likecount = like.textContent;
    var amvid = document.getElementById("amvid").value;
    var addlike = parseInt(likecount.slice(5)) + 1;
    var likeData = addlike;
        $.ajax({
            type: "POST",
            url: `{{ url('../../../../amvtube/like/'${amvid}') }}`,
            data: likeData,
            success: function () {
                like.textContent = "Like" + addlike;
            }
        });
    return false;
});

路由代码 #

Route::post('amvtube/like/{id}', [AmvController::class, 'like']);

控制器函数代码 #

public function like($id) {
    $validator = validator(request()->all(), [
        'like' => 'required',
    ]);
    if($validator->fails()) {
        return back()->withErrors($validator);
    }
    $amv = Amv::find($id);
    $amv->like = request()->like;
    $amv->update();
}

1. 修复AJAX URL生成错误 #

你在URL中混用Blade模板语法和JavaScript变量，Blade渲染时无法解析JS变量${amvid}，导致URL无效。推荐两种修正方式：

方式一：给路由命名并替换占位符 #

先给路由添加名称：

Route::post('amvtube/like/{id}', [AmvController::class, 'like'])->name('amv.like');

然后在AJAX中生成带占位符的URL，再替换为实际ID：

url: "{{ route('amv.like', ['id' => '__PLACEHOLDER__']) }}".replace('__PLACEHOLDER__', amvid),

方式二：直接拼接基础URL #

用Blade生成基础路由前缀，再拼接JS变量：

url: "{{ url('amvtube/like') }}/" + amvid,

2. 修正AJAX请求数据格式 #

控制器需要接收like字段，但你传递的是单个数字，需改为键值对格式：

data: { like: addlike },

3. 优化代码冗余 #

点击事件和表单提交事件重复计算addlike，可以合并逻辑，减少冗余：

var like = document.getElementById("like");
// 全局设置一次CSRF头即可
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

like.addEventListener("click", function(e) {
    e.preventDefault();
    var likecount = like.textContent;
    var amvid = document.getElementById("amvid").value;
    var addlike = parseInt(likecount.slice(5)) + 1;
    document.getElementById("likeInput").value = addlike;
    $("#sendlike").submit(); // 触发表单提交
});

$("#sendlike").on("submit", function (e) {
    e.preventDefault();
    var amvid = document.getElementById("amvid").value;
    var addlike = parseInt(document.getElementById("likeInput").value);
    
    $.ajax({
        type: "POST",
        url: "{{ route('amv.like', ['id' => '__PLACEHOLDER__']) }}".replace('__PLACEHOLDER__', amvid),
        data: { like: addlike },
        success: function () {
            like.textContent = "Like " + addlike;
        },
        error: function(xhr) {
            console.error("请求失败:", xhr.responseText);
        }
    });
    return false;
});

4. 控制器优化（可选） #

添加findOrFail()避免记录不存在的错误，并返回JSON响应方便前端处理：

public function like($id) {
    $validator = validator(request()->all(), [
        'like' => 'required|integer',
    ]);
    if($validator->fails()) {
        return response()->json(['errors' => $validator->errors()], 400);
    }
    
    $amv = Amv::findOrFail($id);
    $amv->like = request()->like;
    $amv->update();
    
    return response()->json(['success' => true]);
}

内容的提问来源于stack exchange，提问作者Thant Htet Aung