Javascript 使用ajax和json laravel在警报框中显示消息
我有以下ajax代码:Javascript 使用ajax和json laravel在警报框中显示消息,javascript,php,json,ajax,laravel,Javascript,Php,Json,Ajax,Laravel,我有以下ajax代码: $(function() { // Get the form. var form = $('#ajax-inquire'); // Get the messages div. var formMessages = $('#form-messages'); // Set up an event listener for the contact form. $(form).submit(function(event) { // Stop the browser from
$(function() {
// Get the form.
var form = $('#ajax-inquire');
// Get the messages div.
var formMessages = $('#form-messages');
// Set up an event listener for the contact form.
$(form).submit(function(event) {
// Stop the browser from submitting the form.
event.preventDefault();
// Serialize the form data.
var formData = $(form).serialize();
// Submit the form using AJAX.
$.ajax({
type: 'POST',
url: $(form).attr('action'),
data: formData
})
.done(function(response) {
// Make sure that the formMessages div has the 'success' class.
formMessages.removeClass('alert-danger');
formMessages.addClass('alert-success');
// Set the message text.
$(formMessages).text(response.success);
// Clear the form.
$('#fullName').val('');
$('#email').val('');
$('#telephone').val('');
$('#message').val('');
formMessages.show();
})
.fail(function(data) {
// Make sure that the formMessages div has the 'error' class.
formMessages.removeClass('alert-success');
formMessages.addClass('alert-danger');
// Set the message text.
if (data.responseText !== '') {
$(formMessages).text(data.responseText);
} else {
$(formMessages).text('Oops! An error occured and your inquire could not be sent.');
}
formMessages.show();
});
});
});
以及控制器中的我的代码:
public function postInquire(Request $request)
{
$data = array(
'tripName' => $request->tripName,
'fullName' => $request->fullName,
'email' => $request->email,
'telephone' => $request->telephone,
'bodyMessage' => $request->message
);
Mail::to('mail@domain.com')->send(new TourInquire($data));
return response()
->json(['code'=>200,'success' => 'Your inquire is successfully sent.']);
}
我发布ajax表单的路线是:
Route::post('/inquire', 'PostPublicController@postInquire')->name('postInquire');
通过以上代码,我可以通过ajax请求发送邮件。我试图在视图的警报框中显示json响应消息。但我无法这样做,因为json响应消息显示在白色页面中,带有我的表单发布路径的url
视图中的HTML代码:
<div class="modal-body">
<div id="form-messages" class="alert success" role="alert" style="display: none;"></div>
<div class="preview-wrap">
<img src="{{asset($tour->featuredImage->path)}}" class="preview-img thumbnail" alt="{{$tour->featuredImage->name}}">
<div class="form-wrap">
<form action="{{route('postInquire')}}" id="'#ajax-inquire" method="POST">
{{csrf_field()}}
<div class="form-group">
<input type="hidden" name="tripName" id="tripName" value="{{$tour->title}}">
<label>Name</label>
<input type="text" class="form-control" placeholder="Enter Your Full Name" name="fullName" id="fullName" required>
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" placeholder="Email Address" name="email" id="email" required>
</div>
<div class="form-group">
<label for="telephone">Phone</label>
<input type="tel" class="form-control" placeholder="Phone Number" name="telephone" id="telephone" required>
</div>
<div class="form-group">
<label for="message">Message</label>
<div class="row">
<textarea name="message" id="message" cols="30" rows="5" class="form-control"></textarea>
</div>
</div>
<button class="btn btn-primary hvr-sweep-to-right">Send Message</button>
</form>
</div>
</div>
</div>
请尝试返回以下内容:
$your_json= json_encode(['code'=>200,'success' => 'Your inquire is successfully sent.']);
return view('your_view',compact('your_json'));
在你看来:
{{json_decode($your_json)['success']}}
您的HTML中有一个简单的输入错误:
id="'#ajax-inquire"
单引号“和”都不应该出现,这意味着jQuery选择器与表单不匹配,因此没有任何Javascript实际触发。表单只是正常提交,因此您最终将访问表单操作中指定的URL
id的指定方式如下:
id="ajax-inquire"
旁注:这在技术上并不重要,但您不需要在现有jQuery对象上使用$。它之所以有效,是因为jQuery接受jQuery对象作为选择器,但如果您不以任何方式过滤或编辑选择器,那么它是多余的
// Here you set form as a jQuery object
var form = $('#ajax-inquire');
// You don't need "$(form)" here, "form" is all you need
$(form).submit(function(event) {
// You can simply use the existing jQuery object
form.submit(function(event) {
使用JSON.parseresponse。您的代码对我来说很好。向我们显示HTML的最小相关部分。@KetanModi您的建议也没有帮助。返回新视图不是OP想要做的。这并没有回答她的问题。jQuery仍然能够获取id并发出带有拼写错误的ajax请求。修复了拼写错误。屏幕上仍然显示json消息。@TanjaForsberg抱歉-该id还有一个错误。我更新了我的问题。顺便说一句,我100%确信AJAX请求没有发生,只是一篇普通的帖子。这篇文章与AJAX不同——一篇AJAX是异步进行的,不会改变页面,但是一篇普通的文章会将您重定向到新页面。谢谢您的建议。我修正了打字错误。已从表单中删除操作和方法属性。它工作得很好。很好,很乐意提供帮助-但您不需要删除操作和方法。这不是问题的一部分。