如何在不刷新页面的情况下使用ajax提交表单请求并在laravel中返回消息

Question

我试图在不刷新页面或重定向的情况下提交表单请求并存储数据。并向发送成功消息

@if (session('message'))
<div class="alert alert-success">
{{ session('message') }}
</div>
@endif

，我在点击提交按钮后得到白色页面，并给出以下响应

{
"msg": "Setting created successfully"
}

html表单：

<form method="POST" action="/mail/store" id="contactForm">
@csrf
<div style="display: flex;" class="name-email">
<div class="form-group col-sm-6 fl_wrap">
<input type="text" name="name" value="{{ old('name') }}" id="name"
class="form-control fl_input" placeholder="Name"
required>
</div>
<div class="form-group col-sm-6 fl_wrap">
<input type="text" name="email" value="{{ old('email') }}" id="email"
placeholder="Email"
class="form-control fl_input" required>
</div>
</div>
<div class="form-group col-sm-12 fl_wrap mt-2">
<textarea type="text" name="message" rows="7" value="{{ old('message') }}" id="message"
class="form-control fl_input" placeholder="message"
required></textarea>
</div>
<div class="form-group text-center mt-5">
<button type="submit" value="save" id="submit" class="btn btn-warning submit"
style="color: white;background: rgb(59, 199, 246); border-color: rgb(59, 199, 246); width: 140px;">
send
</button>
</div>
</form>

Js代码：我认为ajax代码有一些错误或缺失，但我不知道在哪里

<script src="/js/jquery.min.js"></script>
<script !src="" type="text/javascript">
$(document).ready(function () {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$('#contactForm').on('submit',function (e) {
e.preventDefault();
var name = $('#name').val();
var email = $('#email').val();
var message = $('#message').val();
$.ajax({
type: "POST",
url: host+'/mail/store',
data: { name:name ,email:email,message:message},
success: function( msg ) {
$("body").append("<div>"+msg+"</div>");
}
});
$.post('contactForm', { name:name, email:email, message:message }, function () {
console.log(data);
$('#postRequestData').html(data);
});
});
});

控制器中的存储功能

public function store(Request $request)
{
$mail = new Mail();
$mail->name = $request->name;
$mail->mail = $request->email;
$mail->message = $request->message;
$mail->save();
$result = array(
'msg' => 'Setting created successfully' );
return Response::json($result);
}

路由

Route::get('/mail','MailsController@create');
Route::post('/mail/store','MailsController@store');

Answer 1

试试这个：

$.post("{{ url('mail/store') }}", {
name, email, message, '_token': "{{ csrf_token() }}"
}, function(data) {
$('#postRequestData').html(data.message);
});