AJAX未在Laravel中调用控制器方法

Question

Here is some code that I have in my blade layout file. This blade file is called several times in my view like this @include.layout("blade file link"). When a button is pressed I would like my controller function to be called. This works without AJAX. However, when I add AJAX to the mix it does not work.

Below is the code in the blade layout file

<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>

Here is the code in my routes.php file.

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

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

Everything is working up to this point, when I press a button addDeleteActivity function is called in my controller. Now when I add in the AJAX everything falls apart.

Javascript code with ajax below

<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>

The console.logs work inside the $.post function for both buttons. However, the addDeleteActivity function in the controller is no longer getting called.

Answer 1

To make sure the URL is the same, you can set same way you're doing without AJAX,

Try this:

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