AJAX內容類型問題？

Question

我有一個看起來像這樣的形式（心中永遠的laravel語法）

 <form action="{{ URL::route('user-refresh-message') }}" method="post" id="form-user-refresh-message"> 
      <input id="getterid" name="getterid" type="hidden" value="{{ $profile->user_id }}"> 
      <input id="getter" name="getter" type="hidden" value="{{ $profile->user->username }}"> 
      <button type="submit">Refresh</button> 
     {{ Form::token() }} 
     </form> 

當我把我的代碼在提交事件,,, 一切工作很好形式的封閉..

$('#form-user-refresh-message').on('submit', function(){ 
       $.post(
        $(this).prop('action'),{ 
         "_token": $(this).find('input[name=_token]').val(), 
         "getterid": $('#getterid').val(), 
         "getter": $('#getter').val() 
        }, 
        function(data){ 
         $(".message-area").empty(); 
         $.each(data, function(i, item) { 
          $(".message-area").append(
          '<div class="message-item">' + 
          '<div class="message-user">' + item.who + ' said:</div>' + 
          '<div class="message-sent">' + item.when + '</div>' + 
          '<div class="message-viewed"></div>' + 
          '<div class="clearfix"></div>' + 
          '<div class="message-text seen-' + item.seen + '">' + item.text + '</div>' + 
          '</div>'); 
         }) 
         $('.message-area').scrollTop($('.message-area')[0].scrollHeight); 
        }, 
        'json' 
       ); 
       return false; 
form); 

如果我把AJAX的功能和調用它

  function refresh_messages() { 

       $.post(
        $(this).prop('action'),{ 
         "_token": $(this).find('input[name=_token]').val(), 
         "getterid": $('#getterid').val(), 
         "getter": $('#getter').val() 
        }, 
        function(data){ 
         $(".message-area").empty(); 
         $.each(data, function(i, item) { 
          $(".message-area").append(
          '<div class="message-item">' + 
          '<div class="message-user">' + item.who + ' said:</div>' + 
          '<div class="message-sent">' + item.when + '</div>' + 
          '<div class="message-viewed"></div>' + 
          '<div class="clearfix"></div>' + 
          '<div class="message-text seen-' + item.seen + '">' + item.text + '</div>' + 
          '</div>'); 
         }) 
         $('.message-area').scrollTop($('.message-area')[0].scrollHeight); 
        }, 
        'json' 
       ); 
       return false;      
      } 


      $('#form-user-refresh-message').on('submit', function(){ 
        refresh_messages(); 
      }); 

我得到這個控制檯日誌

未聲明純文本文檔的字符編碼。 如果文檔包含來自 US-ASCII範圍之外的字符，則該文檔將在某些瀏覽器 配置中以亂碼文本進行呈現。該文件的字符編碼需要在傳輸協議中聲明的 或文件需要使用字節順序 標記作爲編碼簽名。

而且我在表單動作路由中遇到了請求返回的數據輸出。

如何在我的AJAX請求中設置字符編碼以正常工作？

Answer 1

我不認爲這是一個編碼問題，而是一個JavaScript範圍問題。

在您的代碼的ajax版本中，$(this).prop('action')無效，或者相反，它不存在於該上下文中。因此，您的ajax請求正在對一個不存在的URL進行處理，並且導致404找不到頁面的代碼作爲json響應加載（當它不是）並且您得到該錯誤時。

所以，要解決這個問題，試試這個：

function refresh_messages(targetForm) { 
    $.post(
     $(targetForm).prop('action'),{ 
      "_token": $(targetForm).find('input[name=_token]').val(), 
      "getterid": $('#getterid').val(), 
      "getter": $('#getter').val() 
     }, 
     function(data){ 
      $(".message-area").empty(); 
      $.each(data, function(i, item) { 
       $(".message-area").append(
       '<div class="message-item">' + 
       '<div class="message-user">' + item.who + ' said:</div>' + 
       '<div class="message-sent">' + item.when + '</div>' + 
       '<div class="message-viewed"></div>' + 
       '<div class="clearfix"></div>' + 
       '<div class="message-text seen-' + item.seen + '">' + item.text + '</div>' + 
       '</div>'); 
      }) 
      $('.message-area').scrollTop($('.message-area')[0].scrollHeight); 
     }, 
     'json' 
    ); 
    return false;      
} 


$('#form-user-refresh-message').on('submit', function() { 
    refresh_messages($(this)); 
});