javascript - AJAX 未在 Laravel 中调用 Controller 方法

Question

这是我的 Blade 布局文件中的一些代码。在我看来，这个 Blade 文件被调用了几次，就像这样@include.layout(“ Blade 文件链接”)。当按下按钮时，我希望调用我的 Controller 功能。这无需 AJAX 即可工作。但是，当我将 AJAX 添加到混合中时，它不起作用。

下面是 Blade 布局文件中的代码

<div class="element1">
    <div class="text1">
        <form action="{{ route("progressSheetDynamic") }}" method="post" id="addActivity">
            <button type="submit" class="styleHover styleButton" name="increment" value="increment" > + </button>
            <input type="hidden" name="id" value= {{ $activities}}>
        </form>

        {{ $count  }} / {{  ($goal/5) }}
        <form action="{{route("progressSheetDynamic") }}" method="post" id="removeActivity">
            <button type="submit" class="styleHover styleButton" name="delete" value="delete"> - </button>
            <input type="hidden" name="id" value= {{ $activities }}>
        </form>
    </div>
</div>

这是我的routes.php 文件中的代码。

Route::post(
    "progressSheetDynamic",
    [
        "as" => "progressSheetDynamic",
        "uses" => "tableController@addDeleteActivity"
    ]
);

Route::get("progressSheetDynamic", "tableController@getProgressSheetDynamic");

到目前为止，一切正常，当我按下按钮时，我的 Controller 中会调用 addDeleteActivity 函数。现在，当我添加 AJAX 时，一切都崩溃了。

下面是带有ajax的Javascript代码

<script>

$(document).ready(function(){
    $.ajaxSetup({
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
    });
});

$('#addActivity').submit(function(e){
    e.preventDefault();
    var data = $(this).serialize();
    $.post('progressSheetDynamic', data).done(function(response){
        console.log(data);
    });
});

$('#removeActivity').submit(function(e) {
    e.preventDefault();
    var data = $(this).serialize();
    $.post('progressSheetDynamic', data).done(function(response){
        console.log("deleting");
    });
}); 
</script>

console.logs 在两个按钮的 $.post 函数内工作。但是， Controller 中的 addDeleteActivity 函数不再被调用。

Answer 1

为了确保 URL 相同，您可以在不使用 AJAX 的情况下以相同的方式进行设置，

试试这个:

$('#addActivity').submit(function(e){
    e.preventDefault();
    var data = $(this).serialize();
    $.post('{{ route("progressSheetDynamic")' }}, data).done(function(response){
        console.log(data);
    });
});