title: Show message in alert box wih ajax and json laravel
body: <p>I have the following ajax code:</p>
  
  <pre><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();
  });
  });
  });
  </code></pre>
  
  <p>And my code in controller:</p>
  
  <pre><code>    public function postInquire(Request $request)
  {
      $data = array(
          'tripName' =&gt; $request-&gt;tripName,
          'fullName' =&gt; $request-&gt;fullName,
          'email' =&gt; $request-&gt;email,
          'telephone' =&gt; $request-&gt;telephone,
          'bodyMessage' =&gt; $request-&gt;message
      );
  
      Mail::to('mail@domain.com')-&gt;send(new TourInquire($data));
      return response()
       -&gt;json(['code'=&gt;200,'success' =&gt; 'Your inquire is successfully sent.']);
  }
  </code></pre>
  
  <p>And my route for posting my ajax form is:</p>
  
  <pre><code>Route::post('/inquire', 'PostPublicController@postInquire')-&gt;name('postInquire');
  </code></pre>
  
  <p>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.</p>
  
  <p>HTML code in view:</p>
  
  <pre><code>&lt;div class="modal-body"&gt;
                  &lt;div id="form-messages" class="alert success" role="alert" style="display: none;"&gt;&lt;/div&gt;
                  &lt;div class="preview-wrap"&gt;
  
                      &lt;img src="{{asset($tour-&gt;featuredImage-&gt;path)}}" class="preview-img thumbnail" alt="{{$tour-&gt;featuredImage-&gt;name}}"&gt;
                      &lt;div class="form-wrap"&gt;
                          &lt;form action="{{route('postInquire')}}" id="'#ajax-inquire" method="POST"&gt;
                              {{csrf_field()}}
                              &lt;div class="form-group"&gt;
                                  &lt;input type="hidden" name="tripName" id="tripName" value="{{$tour-&gt;title}}"&gt;
                                  &lt;label&gt;Name&lt;/label&gt;
                                  &lt;input type="text" class="form-control" placeholder="Enter Your Full Name" name="fullName" id="fullName" required&gt;
                              &lt;/div&gt;
                              &lt;div class="form-group"&gt;
                                  &lt;label&gt;Email&lt;/label&gt;
                                  &lt;input type="email" class="form-control" placeholder="Email Address" name="email" id="email" required&gt;
                              &lt;/div&gt;
                              &lt;div class="form-group"&gt;
                                  &lt;label for="telephone"&gt;Phone&lt;/label&gt;
                                  &lt;input type="tel" class="form-control" placeholder="Phone Number" name="telephone" id="telephone" required&gt;
                              &lt;/div&gt;
                              &lt;div class="form-group"&gt;
                                  &lt;label for="message"&gt;Message&lt;/label&gt;
                                  &lt;div class="row"&gt;
                                      &lt;textarea name="message" id="message" cols="30" rows="5" class="form-control"&gt;&lt;/textarea&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;button class="btn btn-primary hvr-sweep-to-right"&gt;Send Message&lt;/button&gt;
                          &lt;/form&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/bQcBT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bQcBT.png" alt="enter image description here"></a></p>