Почему этот jQuery AJAX PUT работает в Chrome, но не FF

В Chrome это делает HTTP PUT так, как должно, но в FireFox 21 это не так. В консоли javascript или в бэкэнд нет ошибок.

Вот 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>

И вот 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
    });
});

Я наблюдал их в Fiddler, и разница между работающим (Chrome) и не работающим (Firefox) заключается в том, что HTTP PUT запускается в Chrome и не запускается в Firefox.

Теперь я знаю, что jQuery.ajax PUT не гарантируется во всех браузерах.

Я прочитал

Эти сайты подтверждают, что PUT может не работать во всех браузерах, но должен работать в FF.

Наконец, я нахожу следующее: FF21 и PUT работают

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

Я мог бы обойти это, но мне кажется, что это должно сработать. Я бы предпочел не использовать jerry-rig, а скорее заставить jQuery.ajax работать правильно.

Другие детали: * jQuery версии 2.0.0 * Backend - Spring3

[Изменить, чтобы добавить HTML]

Ответ 1

Вот неутешительный ответ. Щелчок кнопки представлял форму, хотя она не была обязательной для этого. Я положил onsubmit = "return false"; в форме и проблема была решена.

Ответ 2

Я не могу повторно подать заявку на firefox 21.0 на windows, когда я перейду на google.com и нажмите f12 (firebug), затем запустите следующий код:

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

Я получаю ответ, метод 405 не допускается, но что более важно; при открытии сведений о соединении в консоли я вижу PUT, а не сообщение.

Когда я перехожу к http://jqueryui.com/autocomplete/#remote и запускаю код (без необходимости включать JQuery) с помощью url: "/resources/demos/autocomplete/search.php" xml завершается успешно, а firebug показывает запрос PUT.

Я не знаю сайт, на котором я могу проверить, распознает ли серверный код запрос PUT (google отказывается от POST, а может быть POST), но из внешнего вида Firebug сообщает, что он отправляет запрос PUT.

[ОБНОВЛЕНИЕ]

Я могу подтвердить, что на Firefox 21.0 код выше 100% уверен, что делает запрос PUT. Просто протестировал его с помощью приложения .net, и оба Chrome 27.0.1453.94 FF установили запрос PUT.

Ответ 3

Я думаю, что вам может не хватать чего-то другого - этот 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() { }
    });

Ответ 4

Вы не указываете, какой тип контента вы отправляете на сервер. У меня была аналогичная проблема, когда сервер даже не пытался прочитать данные из запроса, поскольку он не знал, что такое предоставленный формат, поэтому он просто проигнорировал его.

При указании dataType для запроса jQuery вы просто указываете jQuery, каков ожидаемый формат, на который сервер должен ответить вам. Чтобы сообщить серверу, какой формат данных вы отправляете, вы должны предоставить 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 имеет хороший RESTful API, который вы можете использовать как ссылка.