このjQuery AJAX PUTはChromeでは動作しますが、FFでは動作しません

Question

ChromeではこれはHTTP PUTと同じように動作しますが、FireFox 21では動作しません。 JavaScriptコンソールまたはバックエンドにエラーはありません。 jQueryの

<div id="createTeamModal" class="small reveal-modal"> 
     <form id="createTeamForm"> 
      <div class="row"><p id="teamFlavorText" class="lead">Building a new team</p></div> 
      <div class="row"> 
       <div class="small-4 large-4 columns"><label>Team Name:</label></div> 
       <div class="small-6 large-6 columns"><input name="teamName" id="teamName" type="text" size="20"/></div> 
      </div> 
      <div class="row"><p class="lead">Does this team work for a business?</p></div> 
      <div class="row"> 
       <div class="small-4 large-4 columns"><label>Business Size:</label></div> 
       <div class="small-6 large-6 columns"> 
        <select id="businessSizeSelect" name="businessSizeSelect"> 
        <option value="1">Nope, I work alone</option><option value="2">2 to 49</option><option value="3">50 to 99</option><option value="4">100 to 999</option><option value="5">1,000+</option> 
        </select> 
       </div> 
      </div> 
      <div id="businessLocationDiv" class="row" style="display: none; margin-top: 20px;"> 
       <div class="small-4 large-4 columns"><label>Business Location:</label></div> 
       <div class="small-6 large-6 columns"> 
        <select id="businessLocationSelect" name="businessLocationSelect"> 
        </select> 
       </div> 
      </div> 
      <div id="businessTypeDiv" class="row" style="display: none; margin-top: 20px;"> 
       <div class="small-4 large-4 columns"><label>Industry:</label></div> 
       <div class="small-6 large-6 columns"> 
        <select id="businessTypeSelect" name="businessTypeSelect">      
        </select> 
       </div> 
      </div> 
      <div class="row" style="margin-top: 20px;"> 
       <div class="large-offset-10 small-1 large-1 columns"> 
        <button id="createTeamButton" class="small button">Create</button> 
       </div> 
      </div> 
     </form> 
     <a class="close-reveal-modal">&#215;</a> 
    </div> 

そしてここにある：ここで

はHTMLである私はバイオリンでそれらを観察し、かついる

$("#createTeamButton").click(function() { 
    var teamObject = new Team(); 
    teamObject.description = $("#teamName").val(); 
    teamObject.businessSize = $("#businessSizeSelect").val(); 
    teamObject.businessType = $("#businessTypeSelect").val(); 
    teamObject.businessLocation = $("#businessLocationSelect").val(); 

    $.ajax({ 
     type: "PUT", 
     url: "/ajax/rest/team", 
     dataType: "json", 
     data: JSON.stringify(teamObject), 
     success: function() { 
      // Reload the team select box 
      loadTeamSelectBox(); 

      // Pop up the site create modal 
      $('#createSiteModal').foundation('reveal', 'open'); 
     }, 
     error: ajaxErrorHandler 
    }); 
}); 

作業（クローム）を作業していないとの差（Firefoxの） HTTP PUTはChromeで起動し、Firefoxでは起動しません。

今、jQuery.ajax PUTがすべてのブラウザで保証されているわけではありません。

私は、これらのサイトは、PUTは、すべてのブラウザでは動作しないかもしれませんが、FFで動作する必要があることを再確認

• Are the PUT, DELETE, HEAD, etc methods available in most web browsers?
• http://annevankesteren.nl/2007/10/http-method-support

を読みました。

最後に、私は

• http://www.mnot.net/javascript/xmlhttprequest/

の作品FF21とPUTで次を打つ私は確かにこの問題を回避エンジニアことができますが、動作するはずです私には思えます。私はむしろjerry-rigを使ってはいけませんが、むしろjQueryの.ajaxが正しく動作するようにします。

その他の詳細： * jQueryのバージョン2.0.0 *バックエンドがSpring3

[HTMLを追加するための編集]

Answer 1

ここは残念な答えです。ボタンのクリックは、それを行うことに拘束されていなくても、フォームを送信していました。私はonsubmit = "return false;問題が解決しました。

Answer 2

私はあなたが何かを欠落しているかもしれないと思うである - このjsFiddleは、上のPUTリクエストを行います最新のChromeとFirefoxの21：

http://jsfiddle.net/QKkQg/

 var teamObject = new Object(); 
    teamObject.description = $("#teamName").val(); 
    teamObject.businessSize = $("#businessSizeSelect").val(); 
    teamObject.businessType = $("#businessTypeSelect").val(); 
    teamObject.businessLocation = $("#businessLocationSelect").val(); 

    $.ajax({ 
     type: "PUT", 
     url: "/ajax/rest/team", 
     dataType: "json", 
     data: JSON.stringify(teamObject), 
     success: function() { 
      // Reload the team select box 
      loadTeamSelectBox(); 

      // Pop up the site create modal 
      $('#createSiteModal').foundation('reveal', 'open'); 
     }, 
     error: function() { } 
    }); 

Answer 3

I cは私は、もっと重要なのは許されなく応答405の方法を取得

var s = document.createElement("script"); 
s.src="http://code.jquery.com/jquery-1.9.1.js"; 
document.body.appendChild(s); 
//allow some time to load and then run this 
$.ajax({ 
    type: "PUT", 
    url: "/search", 
    dataType: "json", 
    data: JSON.stringify({hi:"there"}), 
    success: function (data) { 
    console.log(data); 
    }, 
    error: function(e) { 
    console.log(e); 
    } 
    }); 

;：私はgoogle.comとF12キーを押して（放火魔）に行くときに再その後、次のコードを実行し、Windows上でFirefoxの21.0にあなたの主張を生成an'tコンソールの接続の詳細を開くと、私はPUTを見ることができます。

http://jqueryui.com/autocomplete/#remoteにアクセスして、url： "/ resources/demos/autocomplete/search.php"を使用してコードを実行すると（JQueryを含まなくても）、xmlは正常終了し、FirebugはPUTリクエストを表示します。

サーバサイドコードがPUTリクエストを検出した場合（GoogleはPOSTも拒否しているのでPOSTは可能です）、FirebugのレポートからPUTリクエストを送信しているかどうかをテストできます。

[UPDATE]

私はFirefoxの21.0上記のコードでそれを確認することができますが、PUT要求を行う100％確かです。 .net appでテストしたところ、Chrome 27.0.1453.94 FFはPUTリクエストを設定しました。

Answer 4

サーバーに送信するコンテンツの種類は指定していません。私は、サーバが提供されたフォーマットが何であるかを知らなかったので、サーバはクエリからデータを読み込もうとしなかった同様の問題を抱えていました。

jQueryリクエストにdataTypeを指定すると、サーバーが返信する予定の形式がjQueryに伝えられます。

$.ajax({ 
    type: "PUT", 
    url: "/ajax/rest/team", 
    dataType: "json", 
    contentType: "application/json", 
    data: JSON.stringify(teamObject) 
}).done(function() { 
    // Reload the team select box 
    loadTeamSelectBox(); 

    // Pop up the site create modal 
    $('#createSiteModal').foundation('reveal', 'open'); 

}).fail(ajaxErrorHandler); 

Backbone.jsあなたがas referenceを使用することができます素敵なRESTfulなAPIを持っている：あなたが送っているどのようなデータ形式のサーバーを言うと、あなたはcontentTypeを提供しなければなりません。