laravel 8 ajax如何提交模态表单到控制器

Question

我试图将数据发送到控制器用于更新目的。但是，我无法通过Ajax发送提交表单，我点击提交按钮，即使我正确地陈述了一切，也没有发生任何事情。

这是我的视图:

<!-- Modal -->
<div class="modal fade" id="edit-model" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">QRcode</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">

<form action="" method="POST" id="updateEditForm" enctype="multipart/form-data">
@csrf
<input type="hidden" id="id" name="id" value="">
<div class="form-group row">
<label for="facName" class="col-sm-2 col-form-label">Faculity Name</label>
<div class="col-sm-10">
<select id="faculity_name" name="faculity_name" class="form-control" vlaue="">
<option value="FKEKK">FKEKK</option>
<option value="FKE">FKE</option>
<option value="FKM">FKM</option>
<option value="FKP">FKP</option>
<option value="FTMK">FTMK</option>
<option value="FPTT">FPTT</option>
<option value="PPB">PPB</option>
<option value="IPTK">IPTK</option>
</select>
<span class="text-danger" id="fac-input-error"></span>
</div>
</div>

<div class="form-group row">
<label for="docType" class="col-sm-2 col-form-label">Document Type</label>
<div class="col-sm-10">
<select id="document_type" name="document_type" class="form-control" vlaue="">
<option value="Past years exams">Past years exams</option>
<option value="Past years quizes">Past years quizes</option>
<option value="Past years assignments">Past years assignments</option>
<option value="Past years mini projects">Past years mini projects</option>
<option value="Past years final projects">Past years final projects</option>
</select>
<span class="text-danger" id="doc-input-error"></span>
</div>
</div>

<div class="form-group row">
<label for="uploadFile" class="col-sm-2 col-form-label">Upload File</label>
<div class="col-sm-10">
<input type="file" class="form-control-file" name="file" id="file">
<span class="text-danger" id="file-input-error"></span>
</div>
</div>
<div class="form-group row">
<label for="subName" class="col-sm-2 col-form-label">Subject Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="subject_name" name="subject_name" vlaue="">
<span class="text-danger" id="sub-input-error"></span>
</div>
</div>


<div class="form-group row">
<label for="desc" class="col-sm-2 col-form-label">Description</label>
<div class="col-sm-10">
<textarea class="form-control" id="description" name="description" rows="3" vlaue=""></textarea>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" id="btn-edit" class="btn btn-primary">Save</button>
</div>
</div>
</form>

</div>
</div>
</div>
</div>

Ajax:

$(document).ready(function () {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$('#updateEditForm').submit(function(e) {
e.preventDefault();
var id = $("#id").val();
let formData = new FormData($(this)[0]);
var idd = $("#updateFiles input[name=id]").val()

alert(idd)

$.ajax({
url: '/fileEdit/' + $id,
type: "POST",
data: {
formData
},
contentType: false,
processData: false,
success: function (response) {


alert(response.message);
$('#edit-model').modal('hide');
},
error: function(response){
console.log(response)

}
});
});

$('body').on('click', '#editFiles', function (event) {
event.preventDefault();
var id = $(this).data('id');
$.get('file/' + id + '/edit', function (data) {
$('#userCrudModal').html("Edit file");
$('#btn-edit').val("Edit file");
$('#edit-model').modal('show');
$('#id').val(data.data.id);
$('#faculity_name').val(data.data.faculity_name);
$('#document_type').val(data.data.document_type);
$('#file').val(data.data.file);
$('#subject_name').val(data.data.subject_name);
$('#description').val(data.data.description);
})
});
}); 

路线:

Route::post('/fileEdit/{id}', [utemfilesharing::class, 'edit'])->name('file.edit');

控制器:

public function edit(Request $req, $id)
{
$validate = Validator::make($req->all(),[
'faculity_name' => 'required',
'document_type' => 'required',
'subject_name' => 'required',
'description' => 'required'
]);
$fileId = File::find($id);
if($fileId) {
$fileId->faculity_name = $req->input("faculity_name");
$fileId->document_type = $req->input("document_type");
$fileId->subject_name = $req->input("subject_name");
$fileId->description = $req->input("description");

if($req->hasFile('file'))
{
$path = storage_path('app/public/uploads/'. $fileId->name);
if(File::exists($path)){
File::delete($path);
}
$file = $req->name('file');
$extension = $file->getClientOriginalName();
$filename = time().'_'.$extension;
$file->move('app/public/uploads/', $fileName);
$fileId->name = $filename;
}
$fileId->save();
return response()->json(['success'=>200,
'message'=>'File Updated Successfully']);
}
else{
return response()->json(['success'=>200,
'message'=>'ID Not Found']);
}

}

请注意，数据包括文件，我不确定错误在于此代码，因为提交按钮不工作。如有任何帮助，不胜感激

Answer 1

伙计!

试着去做

$('#updateEditForm').submit(function(e) {

$('#btn_edit').submit(function(e) {