【发布时间】：2022-08-19 17:53:17
【问题描述】：
我正在尝试将数据发送到控制器以进行更新。但是，我无法通过 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>
阿贾克斯：
$(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\']);
}
}
请注意，数据包括文件，由于提交按钮不起作用，因此不确定此代码的错误在哪里。任何帮助将不胜感激
-
\“我点击按钮提交，没有任何反应\”- 所以在AJAX请求之前你甚至看不到你放在那里的
alert(idd)？浏览器控制台说什么，有什么错误吗？您是否验证了整个就绪处理程序函数是否已执行？ -
什么都没有显示。我刚刚收到此警告消息：主线程上的同步 XMLHttpRequest 已被弃用，因为它对最终用户的体验产生不利影响。如需更多帮助xhr.spec.whatwg.org
标签： javascript ajax file-upload laravel-8 ajaxform