顯示消息

Question

我有以下的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響應消息顯示在我的帖子路徑的形式的白色頁面。鑑於

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> 

Answer 1

你有一個 簡單的拼寫錯誤在你的HTML：

id="'#ajax-inquire" 

兩個單引號'和#不應該出現，並意味着你的jQuery選擇不匹配的形式，所以沒有你的Javascript的實際發射。表單只是正常提交​​，因此您最終使用action格式指定的網址。

id="ajax-inquire" 

邊注：

的id應該像指定它不技術上問題，但你並不需要對現有的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) { 

Answer 2

嘗試返回這個，而不是這樣的：

$your_json= json_encode(['code'=>200,'success' => 'Your inquire is successfully sent.']); 

return view('your_view',compact('your_json')); 

，然後在您的視圖：

{{json_decode($your_json)['success']}}