php - ajax 代码不适用于模态表单提交 - laravel8
问题描述
我想提交此模态表单并在不刷新页面的情况下获得消息成功。
所以我使用以下代码：
风景 ：
<x-app-layout>
<div class="container-fluid">
<div class="row">
<div class="col app-col">
<div class="mb-2">
<h1>Castings</h1>
<div class="top-right-button-container">
<a href="javascript:void(0);" data-target="#castingmodel" data-toggle="modal" class="btn btn-outline-primary btn-lg top-right-button mr-1"> Add New </a>
<div class="col-xl-6">
<div id="result"></div>
</div>
</div>
<div class="separator mb-5"></div>
</div>
<div class="modal fade" id="castingmodel" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalContentLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form method="post" class="needs-validation tooltip-label-right" id="formcast" novalidate enctype="multipart/form-data">
@csrf
<input type="hidden" id="id_hidden" name="id" />
<div class="form-group position-relative error-l-50">
<label>Name</label>
<input type="text" class="form-control" name ="casting_name" id="casting_name" >
<div class="invalid-tooltip">
Name is required!
</div>
</div>
<div class="form-group position-relative error-l-50">
<label>CIN</label>
<input type="text" class="form-control" name="casting_cin" id="casting_cin" required>
<div class="invalid-tooltip">
CIN is required!
</div>
</div>
<div class="form-group position-relative error-l-50">
<label>EMAIL</label>
<input type="text" class="form-control" rows="2" name="casting_email" required>
<div class="invalid-tooltip">
EMAIL is required!
</div>
</div>
<div class="form-group position-relative error-l-50">
<label>PHONE</label>
<input type="number" class="form-control" rows="2" name="casting_phone" required>
<div class="invalid-tooltip">
PHONE is required!
</div>
</div>
<div class="form-group position-relative">
<label>Radio</label>
<div>
<div class="custom-control custom-radio">
<input type="radio" id="jQueryCustomRadio1" name="casting_gender" class="custom-control-input" required value="homme">
<label class="custom-control-label" for="jQueryCustomRadio1">Homme</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="jQueryCustomRadio2" name="casting_gender" class="custom-control-input" required value="femme">
<label class="custom-control-label" for="jQueryCustomRadio2" >Femme</label>
</div>
</div>
</div>
<div class="form-group position-relative error-l-50">
<label>ADDRESS</label>
<input type="text" class="form-control" rows="2" name="casting_address" required>
<div class="invalid-tooltip">
ADDRESS is required!
</div>
</div>
<div class="form-group position-relative error-l-50">
<label>CITY</label>
<input type="text" class="form-control" rows="2" name="casting_city" required>
<div class="invalid-tooltip">
CITY is required!
</div>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Upload</span>
</div>
<div class="custom-file">
<input type="file" name="casting_photo" class="custom-file-input" id="inputGroupFile01">
<label class="custom-file-label" for="inputGroupFile01">Choose file</label>
</div>
</div>
<!-- <div class="form-group position-relative">
<button type="submit" id="submit" name="submit" class="btn btn-primary mb-0">Submit</button>
</div> -->
<button type="submit" id="createBtn" class="btn btn-primary" onclick="createPost()"> Save </button>
<div class="result"></div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
脚本.js
// Pass csrf token in ajax header
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
//----- [ button click function ] ----------
$("#createBtn").click(function(event) {
event.preventDefault();
$(".error").remove();
$(".alert").remove();
var form_data = $("#formcast").serialize();
createPost(form_data);
});
// create new post
function createPost(form_data) {
$.ajax({
url: 'castings',
method: 'post',
data: form_data,
dataType: 'json',
beforeSend:function() {
$("#createBtn").addClass("disabled");
$("#createBtn").text("Processing..");
},
success:function(res) {
$("#createBtn").removeClass("disabled");
$("#createBtn").text("Save");
if(res.status == "success") {
$(".result").html("<div class='alert alert-success alert-dismissible'><button type='button' class='close' data-dismiss='alert'>×</button>" + res.message+ "</div>");
}
else if(res.status == "failed") {
$(".result").html("<div class='alert alert-danger alert-dismissible'><button type='button' class='close' data-dismiss='alert'>×</button>" + res.message+ "</div>");
}
}
});
}
控制器
public function store(Request $request)
{
$file=$request->file('casting_photo');
if($file->isValid())
{
$destinationPath='castingimage/';
$image=date('YmdHis').'.'.$file->getClientOriginalExtension();
$file->move($destinationPath,$image);
}
$cast = new Casting;
$cast -> casting_name= $request->input('casting_name');
$cast -> casting_cin= $request->input('casting_cin');
$cast -> casting_email= $request->input('casting_email');
$cast -> casting_phone= $request->input('casting_phone');
$cast -> casting_gender= $request->input('casting_gender');
$cast -> casting_address= $request->input('casting_address');
$cast -> casting_city= $request->input('casting_city');
$cast-> casting_photo=$image;
$cast->save();
if(!is_null($cast)) {
return response()->json(["status" => "success", "message" => "Success! post created.", "data" => $cast]);
}
else {
return response()->json(["status" => "failed", "message" => "Alert! post not created"]);
}
}
当我执行我的代码时，我得到这个页面，其中包含插入的数据
当我检查控制台时，我得到了这个错误：
Access to XMLHttpRequest at 'javascript:void(0);' from origin 'http://127.0.0.1:8000' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
javascript:void(0); Failed to load resource: net::ERR_FAILED
我坚持这个错误，我不知道是什么问题
编辑
app.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="UTF-8">
<title>Casting/Influenceurs</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}" />
<link rel="stylesheet" href="font/iconsmind-s/css/iconsminds.css" />
<link rel="stylesheet" href="font/simple-line-icons/css/simple-line-icons.css" />
<link rel="stylesheet" href="css/vendor/bootstrap.min.css" />
<link rel="stylesheet" href="css/vendor/bootstrap.rtl.only.min.css" />
<link rel="stylesheet" href="css/vendor/fullcalendar.min.css" />
<link rel="stylesheet" href="css/vendor/dataTables.bootstrap4.min.css" />
<link rel="stylesheet" href="css/vendor/datatables.responsive.bootstrap4.min.css" />
<link rel="stylesheet" href="css/vendor/select2.min.css" />
<link rel="stylesheet" href="css/vendor/perfect-scrollbar.css" />
<link rel="stylesheet" href="css/vendor/glide.core.min.css" />
<link rel="stylesheet" href="css/vendor/bootstrap-stars.css" />
<link rel="stylesheet" href="css/vendor/nouislider.min.css" />
<link rel="stylesheet" href="css/vendor/bootstrap-datepicker3.min.css" />
<link rel="stylesheet" href="css/vendor/component-custom-switch.min.css" />
<link rel="stylesheet" href="css/main.css" />
</head>
<body id="app-container" class="menu-default show-spinner">
@include('layouts.navigation2')
<main>
{{ $slot }}
</main>
<script src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="{{asset('js/script.js')}}"></script>
<script src="js/vendor/jquery-3.3.1.min.js"></script> -->
<script src="js/vendor/bootstrap.bundle.min.js"></script>
<script src="js/vendor/Chart.bundle.min.js"></script>
<script src="js/vendor/chartjs-plugin-datalabels.js"></script>
<script src="js/vendor/moment.min.js"></script>
<script src="js/vendor/fullcalendar.min.js"></script>
<script src="js/vendor/datatables.min.js"></script>
<script src="js/vendor/perfect-scrollbar.min.js"></script>
<script src="js/vendor/progressbar.min.js"></script>
<script src="js/vendor/jquery.barrating.min.js"></script>
<script src="js/vendor/select2.full.js"></script>
<script src="js/vendor/nouislider.min.js"></script>
<script src="js/vendor/bootstrap-datepicker.js"></script>
<script src="js/vendor/Sortable.js"></script>
<script src="js/vendor/mousetrap.min.js"></script>
<script src="js/vendor/glide.min.js"></script>
<script src="js/dore.script.js"></script>
<script src="js/scripts.js"></script>
<script src="js/vendor/jquery.contextMenu.min.js"></script>
<script src="js/vendor/bootstrap-notify.min.js"></script>
<script src="js/vendor/jquery.validate/jquery.validate.min.js"></script>
<script src="js/vendor/jquery.validate/additional-methods.min.js"></script>
<script src="js/vendor/bootstrap-tagsinput.min.js"></script>
</body>
</html>
解决方案
我不知道 Laravel 框架，但我知道 PHP、HTML、jQuery 和 Bootstrap。首先，您在同一个按钮中有一个“提交”类型的按钮和一个“onclick”。这两个都不是必需的，并且有多种方法可以通过 jQuery 完成提交表单。我已在下面调整了您的视图以使用“.submit”处理程序。
您的观点 - 所做的更改是代码清理以提高可读性，并从提交按钮中删除了“onclick”。我还删除了“@csrf”，因为我不确定为什么会出现。
<x-app-layout>
<div class="container-fluid">
<div class="row">
<div class="col app-col">
<div class="mb-2">
<h1>Castings</h1>
<div class="top-right-button-container">
<a href="javascript:void(0);" data-target="#castingmodel" data-toggle="modal" class="btn btn-outline-primary btn-lg top-right-button mr-1"> Add New </a>
<div class="col-xl-6">
<div id="result"></div>
</div>
</div>
<div class="separator mb-5"></div>
</div>
<div class="modal fade" id="castingmodel" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalContentLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<form method="post" class="needs-validation tooltip-label-right" id="formcast" novalidate enctype="multipart/form-data">
<input type="hidden" id="id_hidden" name="id" />
<div class="form-group position-relative error-l-50">
<label>Name</label>
<input type="text" class="form-control" name ="casting_name" id="casting_name" >
<div class="invalid-tooltip">Name is required!</div>
</div>
<div class="form-group position-relative error-l-50">
<label>CIN</label>
<input type="text" class="form-control" name="casting_cin" id="casting_cin" required>
<div class="invalid-tooltip">CIN is required!</div>
</div>
<div class="form-group position-relative error-l-50">
<label>EMAIL</label>
<input type="text" class="form-control" rows="2" name="casting_email" required>
<div class="invalid-tooltip">EMAIL is required!</div>
</div>
<div class="form-group position-relative error-l-50">
<label>PHONE</label>
<input type="number" class="form-control" rows="2" name="casting_phone" required>
<div class="invalid-tooltip">PHONE is required!</div>
</div>
<div class="form-group position-relative">
<label>Radio</label>
<div>
<div class="custom-control custom-radio">
<input type="radio" id="jQueryCustomRadio1" name="casting_gender" class="custom-control-input" required value="homme">
<label class="custom-control-label" for="jQueryCustomRadio1">Homme</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="jQueryCustomRadio2" name="casting_gender" class="custom-control-input" required value="femme">
<label class="custom-control-label" for="jQueryCustomRadio2" >Femme</label>
</div>
</div>
</div>
<div class="form-group position-relative error-l-50">
<label>ADDRESS</label>
<input type="text" class="form-control" rows="2" name="casting_address" required>
<div class="invalid-tooltip">ADDRESS is required!</div>
</div>
<div class="form-group position-relative error-l-50">
<label>CITY</label>
<input type="text" class="form-control" rows="2" name="casting_city" required>
<div class="invalid-tooltip">CITY is required!</div>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Upload</span>
</div>
<div class="custom-file">
<input type="file" name="casting_photo" class="custom-file-input" id="inputGroupFile01">
<label class="custom-file-label" for="inputGroupFile01">Choose file</label>
</div>
</div>
<button type="submit" id="createBtn" class="btn btn-primary">Save</button>
<div class="result"></div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
对于您的 Javascript / jQuery，唯一改变的是从“.click”到“.submit”：
// Pass csrf token in ajax header
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
//----- [ button click function ] ----------
$("#formcast").submit(function(event) {
event.preventDefault();
$(".error").remove();
$(".alert").remove();
var form_data = $("#formcast").serialize();
createPost(form_data);
});
// create new post
function createPost(form_data) {
$.ajax({
url: 'castings',
method: 'post',
data: form_data,
dataType: 'json',
beforeSend:function() {
$("#createBtn").addClass("disabled");
$("#createBtn").text("Processing..");
},
success:function(res) {
$("#createBtn").removeClass("disabled");
$("#createBtn").text("Save");
if(res.status == "success") {
$(".result").html("<div class='alert alert-success alert-dismissible'><button type='button' class='close' data-dismiss='alert'>×</button>" + res.message+ "</div>");
} else if(res.status == "failed") {
$(".result").html("<div class='alert alert-danger alert-dismissible'><button type='button' class='close' data-dismiss='alert'>×</button>" + res.message+ "</div>");
}
}
});
}
对于你的 PHP，我刚刚清理了它，因为我不知道 Laravel：
public function store(Request $request) {
$file = $request->file('casting_photo');
if($file->isValid()) {
$destinationPath='castingimage/';
$image=date('YmdHis').'.'.$file->getClientOriginalExtension();
$file->move($destinationPath,$image);
}
$cast = new Casting;
$cast->casting_name = $request->input('casting_name');
$cast->casting_cin = $request->input('casting_cin');
$cast->casting_email = $request->input('casting_email');
$cast->casting_phone = $request->input('casting_phone');
$cast->casting_gender = $request->input('casting_gender');
$cast->casting_address = $request->input('casting_address');
$cast->casting_city = $request->input('casting_city');
$cast->casting_photo=$image;
$cast->save();
if(!is_null($cast)) {
return response()->json(["status" => "success", "message" => "Success! post created.", "data" => $cast]);
} else {
return response()->json(["status" => "failed", "message" => "Alert! post not created"]);
}
}
至于您最初报告的错误，在我看来您的主要问题是 CORS。我不确定您使用什么软件进行测试，但它似乎是本地的，所以我假设像 WAMP 之类的软件。我会做一些额外的搜索，以确保 WAMP 启用了 CORS 支持并接受所有请求。本文可能会有所帮助：在 Windows 8 上使用 wamp 启用 CORS
从那里，如果请求成功，您要确保您的 PHP 函数返回“200”响应。您的 Javascript/jQuery 将寻找此响应状态代码。
推荐阅读
- spring - 运行spring boot原生应用，无法加载资源文件
- google-cloud-platform - gcp 云发布/订阅推送订阅最大确认截止日期与云运行最大运行时不兼容
- openstack - Openstack 实例无法访问 Internet [linuxbridge]
- python - 如何在python中访问.csv文件中的值
- r - 查找非零行r数据框的开始日期和结束日期并创建一个表
- python - 在 Pyqt5 中如何删除由 QHBoxLayout 引起的一行？
- visual-c++ - 第二次通过循环调用 CButton::Create 时出现运行时检查失败 #0。问题是什么？
- vba - 如何保留标题并删除所有数据？
- php - 分配给鼠标点击的音频不起作用，因为可点击的图像是 h ref 链接
- cucumber - 比较 b/w TestNg 和 Cucumber