Perché jQuery AJAX PUT funziona in Chrome ma non in FF

Question

In Chrome questo fa un PUT HTTP come dovrebbe, ma in FireFox 21 no. Non ci sono errori nella console javascript o nel back-end.

Ecco il codice HTML:

<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> 

E qui è il jQuery:

$("#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 
    }); 
}); 

li ho osservato in Fiddler, e la differenza tra il lavorare (Chrome) e non lavora (Firefox) è che l'HTTP PUT si attiva in Chrome e non si attiva in Firefox.

Ora, so che jQuery.ajax PUT non è garantito in tutti i browser.

Ho letto

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

Questi siti riaffermano che PUT potrebbe non funzionare in tutti i browser, ma dovrebbe funzionare in FF.

Infine, mi ha colpito quanto segue con FF21 e PUT funziona

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

potevo certamente progettare intorno a questo, ma mi sembra questo dovrebbe funzionare. Preferirei non jerry-rig qualcosa, ma piuttosto ottenere jaery di jQuery per funzionare correttamente.

Altri particolari: * versione jQuery 2.0.0 * backend è Spring3

[Modifica per aggiungere il codice HTML]

Answer 1

Ecco una risposta deludente. Il clic del pulsante era l'invio del modulo, anche se non era obbligato a farlo. Ho messo onsubmit = "return false;" nella forma e il problema è stato risolto.

Answer 2

Penso che si potrebbe mancare qualcosa d'altro - questo jsFiddle fa una richiesta PUT su più recente Chrome e 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 an't ri produrre il vostro reclamo su Firefox 21,0 su Windows, quando vado a google.com e premere f12 (Firebug) quindi eseguire il codice seguente:

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); 
    } 
    }); 

ricevo risposta 405 metodo non consentito, ma ancora più importante; quando apro i dettagli della connessione nella console posso vedere PUT, non pubblicare.

Quando vado a http://jqueryui.com/autocomplete/#remote ed eseguo il codice (senza dover includere JQuery) usando url: "/ resources/demo/autocomplete/search.php" l'xml termina con successo e Firebug mostra la richiesta PUT.

non so un sito dove posso verificare se il codice lato server rileva la richiesta PUT (google rifiuta POST e quindi potrebbe essere un POST), ma dagli sguardi di Firebug segnalazione è l'invio di una richiesta PUT.

[UPDATE]

Posso confermare che su Firefox 21,0 codice di cui sopra è sicuro al 100% facendo una richiesta PUT. Appena testato con un'app .net e sia Chrome 27.0.1453.94 FF impostare una richiesta PUT.

Answer 4

Non si specifica il tipo di contenuto che si sta inviando al server. Ho avuto un problema simile in cui il server non ha nemmeno provato a leggere i dati dalla query in quanto non sapeva quale fosse il formato fornito, quindi lo ha semplicemente ignorato.

Quando si specifica un dataType a una richiesta jQuery, si sta semplicemente dicendo a jQuery qual è il formato previsto con cui il server dovrebbe rispondere. A dire il server quale formato dei dati che si sta inviando, è necessario fornire un contentType:

$.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 ha un bel RESTful API che è possibile utilizzare as reference.