1. ホーム
  2. jquery

[解決済み】Chrome Developer ToolsでリソースがDocumentと解釈され、MIMEタイプapplication/jsonの警告で転送される。

2022-02-02 09:36:17

質問

jQuery Form プラグインを使用してサーバーにフォームを投稿する、以下のスニペットがあります(ajax)。

  var options = {
    dataType: "json",
    success: function(data) { 
      alert("success");
    } 
  }; 

  $form.ajaxSubmit(options);

フォームです。

<form enctype="multipart/form-data" id="name_change_form" method="post" action="/my_account/"> 
<div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='6c9b552aaba88b8442077e2957e69303' /></div> 
  <table> 
    <tr> 
      <td> 
        <label for="id_first_name">First name</label>:
      </td> 
      <td> 
        <input name="first_name" value="Patrick" maxlength="30" type="text" id="id_first_name" size="30" /> 
      </td> 
    </tr> 
    <tr> 
      <td> 
        <label for="id_last_name">Last name</label>:
      </td> 
      <td> 
        <input name="last_name" value="Sung" maxlength="30" type="text" id="id_last_name" size="30" /> 
      </td> 
    </tr> 
  </table> 
  <input type="hidden" name="form_id" value="name_change_form" /> 
</form> 

ajaxの実装は問題なく動作しています。しかし、警告が表示されます。

リソースはドキュメントとして解釈されるが、MIMEタイプはapplication/jsonで転送される。

をChromeデベロッパーツールで表示します。なぜ警告が出るのか、あるいは解決する方法が知りたいです。

を使うように変更しました。 $.post それ以来、魔法のようにエラーはなくなりました。なぜ $.post は動作するが $form.ajaxSubmit . もし、どなたか解説していただけると幸いです。少なくとも、この問題は解決されます。以下は、新しいコードです。

var url = $form.attr("action");
$.post(
  url, 
  $form.serialize(), 
  function(data) {
    alert("success");
  },
  "json"
); 

解決方法は?

私は別の方法をとりました。$.postを使うように変えたら、それ以来エラーが出なくなったのです。