在警报框中显示消息与ajax和json laravel(Show message in alert box wih ajax and json laravel)

在警报框中显示消息与ajax和json laravel(Show message in alert box wih ajax and json 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 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>

I have the following ajax code:

$(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(); }); }); });

And my code in controller:

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.']); }

And my route for posting my ajax form is:

Route::post('/inquire', 'PostPublicController@postInquire')->name('postInquire');

With the above codes I'm able to send mail via ajax request. I'm trying to show json response message in alert box in my view. But I'm unable to do so as json response message is show in white page with url of my post route for form.

HTML code in view:

<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>

最满意答案

您的HTML中有一个简单的拼写错误：

id="'#ajax-inquire"

单引号'和#都不应该存在，并且意味着你的jQuery选择器与表单不匹配，所以你的Javascript都没有实际触发。 表单只是正常提交​​，因此您最终会在表单action指定的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) {

You have a simple typo in your HTML:

id="'#ajax-inquire"

Both the single quote ' and the # should not be there, and mean that your jQuery selector does not match the form, so none of your Javascript is actually firing. The form is simply submitting normally, and so you end up on the URL specified in the form action.

The id should be specified like:

id="ajax-inquire"

Side note: It doesn't technically matter but you don't need to use $() on existing jQuery objects. It works because jQuery accepts a jQuery object as a selector, but it is redundant if you are not filtering or editing the selector in any way.

// 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) {