Dlaczego to jQuery AJAX PUT działa w Chrome, ale nie FF

Question

W Chrome robi to HTTP PUT, tak jak powinno, ale w FireFox 21 nie. Nie ma błędów w konsoli javascript lub w zapleczu.

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

I tu jest 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 
    }); 
}); 

Widziałem je w Skrzypek, a różnica pomiędzy pracą (chrom) i nie działa (Firefox) jest to, że HTTP PUT wystrzeliwuje w Chrome i nie uruchamia się w Firefoksie.

Teraz wiem, że PUT jQuery.ajax nie jest gwarantowany we wszystkich przeglądarkach.

Czytałem

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

Miejsca te potwierdzają, że wprowadzone może nie działać we wszystkich przeglądarkach, ale powinien działać w FF.

Wreszcie trafiłem następujące z FF21 i PUT działa

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

mogłem pewno inżynier wokół tego, ale wydaje mi się to powinno działać. Wolałbym nie jerry-rig coś, ale raczej uzyskać .ajax jQuery do poprawnego działania.

Inne Szczegóły: * wersja jQuery 2.0.0 * backend Spring3

[Edytuj, aby dodać HTML]

Answer 1

Oto rozczarowująca odpowiedź. Kliknięcie przycisku przesyłało formularz, nawet jeśli nie było to konieczne. Wstawiłem onsubmit = "return false;" w formie i problem został rozwiązany.

Answer 2

myślę, że może być brakuje czegoś innego - to jsFiddle robi żądanie umieścić na Ostatnio chrom i 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

Ic An't ponownie produkować swoje roszczenia na Firefox 21.0 na Windows, kiedy idę do google.com i naciśnij F12 (firebug), a następnie uruchom następujący kod:

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

uzyskać odpowiedź 405 metoda nie pozwoliły jednak ważniejsze; po otwarciu szczegółów połączenia w konsoli widzę PUT, a nie post.

Po przejściu do i uruchomieniu kodu (bez konieczności dołączania JQuery) za pomocą url: "/ resources/demos/autocomplete/search.php" kończy się pomyślne zakończenie xml, a firebug pokazuje żądanie PUT.

Nie znam strony, na której można przetestować, czy kod po stronie serwera wykrywa żądanie PUT (Google odrzuca POST, a więc może to być POST), ale z wyglądu raportów Firebug wysyła zapytanie PUT.

[UPDATE]

Mogę potwierdzić, że na Firefox 21,0 powyższy kod jest w 100% pewien, składając wniosek PUT. Po prostu przetestowano go z aplikacją .net i oba Chrome 27.0.1453.94 FF ustawiły żądanie PUT.

Answer 4

Nie określasz rodzaju treści wysyłanej do serwera. Miałem podobny problem, gdy serwer nawet nie próbował odczytać danych z zapytania, ponieważ nie wiedział, jaki jest podany format, więc go zignorował.

Podczas określania dataType do żądania jQuery, wystarczy powiedzieć jQuery, jaki jest oczekiwany format, na który serwer powinien odpowiedzieć. Aby poinformować serwer, jakie dane Format wysyłanych, należy podać 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 ma ładny relaksującego API, które można wykorzystać as reference.