how best to send form data through ajax in Laravel - ajax

Question

`I am trying to pass data from my modal form through ajax but I get the error of the route not supporting Post method.
here is my modal form in the blade view:
<form role="form" method="post" id="edit-student-data-form" data-ajax="true">
#csrf
{{ method_field('POST') }}
<div class="pl-lg-6">
<div class="col-lg-5">
<div class="form-group">
<label class="form-control-label" for="post-text">Name: </label>
{{$name}}
</div>
</div>
<div class="col-lg-5">
<div class="form-group">
<label class="form-control-label">Reg No: </label>
{{$sender}}
</div>
</div>
<div class="col-lg-5">
<div class="form-group">
<label class="form-control-label">Program: </label>
{{$program}}
</div>
</div>
<div class="col-lg-5">
<div class="form-group">
<label class="form-control-label" for="input-email">Email: </label>
<input name="email" type="email" id="email" class="form-control form-control-alternative" placeholder="{{$email}}">
</div>
</div>
<div class="col-lg-5">
<div class="form-group">
<label class="form-control-label" for="input-phone">Phone Number</label>
<input name="phone" type="text" id ="phone" class="form-control form-control-alternative" placeholder="{{$tel}}">
</div>
</div>
</div>
<!-- Submit button -->
<div id="results"></div>
<div class="pl-lg-0 pr-0 text-center">
<button class="btn btn-success btn-sm pl-lg-2 pt-2 pb-2 pr-2"
id="submit" style="color:white">
Submit
</button>
<img style="visibility: hidden" id="loader" src="{{ asset('argon') }}/img/brand/ajax-loader.gif" alt="working.." />
</div>
</form>
here are my routes:
//student routes
Route::middleware(['auth', 'user-role:1'])->group(function(){
Route::get('/student/home', [App\Http\Controllers\StudentController::class, 'index'])->name('home.student');
Route::post('student/update', [App\Http\Controllers\StudentController::class, 'studentupdate'])->name('studentupdate');
});
here is my js code to send the form data using ajax:
> ```
> $.ajaxSetup({
> headers: {
> 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
> }
> });
> $('#edit-student-data-form').on('submit', function(event){
> event.preventDefault();
> console.log("form submitted!") // sanity check
> edit_student();
> });
>
> function edit_student() {
> console.log('create post is working');
> hideshow('loader',1);
> $.ajax({
> url: "student/update",
> type: "POST",
> data:$('#edit-student-data-form').serialize(),
> dataType: "json",
> contentType: false,
> cache: false,
> processData: false,
> success: function (json) {
> if (json.error === true) {
> $('#results').html("<div class='alert-box alert radius text-warning' data-alert>"+json.message+
> "</div>");
> else {
> $('#results').html("<div class='alert-box alert radius text-success' data-alert>"+json.message+
> "</div>");
> }
> resetForm('edit-student-data-form');
> hideshow('loader',0);
> console.log(json.message);
> },
> error: function (xhr, errmsg, err) {
> console.log(xhr.status + ": " + xhr.responseText);
> }
>
> });
> }
> ```
i tried adding the #csrf fieldl to the form and removing the route from the grouped middleware route but could not work still. the error persists`