Почему этот 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 работает.

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

Прочие сведения: * jQuery версии 2.0.0 * Бэкенд — Spring3

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


xmlhttprequest jquery ajax firefox http-put
person Lurk21    schedule 23.05.2013    source источник
comment
Я не думаю, что это будет поддерживаться во всех браузерах. но несколько ссылок, похожих здесь /5846741/ stackoverflow.com/questions/5894400/   -  person Sakthivel    schedule 23.05.2013
comment
Если вы считаете, что это ошибка jQuery, укажите точную версию jQuery, которую вы используете. Но я не думаю, что это имеет какое-либо отношение к PUT, поскольку URL-адрес тоже меняется.   -  person Esailija    schedule 25.05.2013
comment
Я обновил вопрос, чтобы включить запрошенные детали. Оказывается, URL не меняется. GET, который я видел, выполняется как Chrome, так и Firefox. Разница, которую я вижу сегодня, заключается в том, что работающий (Chrome) фактически выполняет HTTP PUT, тогда как неисправный (Firefox) не выполняет HTTP PUT.   -  person Lurk21    schedule 26.05.2013
comment
У меня работает с Firefox 21.0 и jQuery 2.0.2. Источник вашей проблемы не включен в ваш вопрос. ПЛБКАЦ?   -  person Old Pro    schedule 01.06.2013

Ответы (4)


arrow_upward
3
arrow_downward

Я не могу воспроизвести вашу претензию к 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.

person HMR    schedule 26.05.2013

arrow_upward
1
arrow_downward

Я думаю, вы могли упустить что-то еще - этот 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() { }
    });
person kobigurk    schedule 25.05.2013

arrow_upward
1
arrow_downward

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

При указании 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, который вы можете использовать в качестве ссылки.

person Yanick Rochon    schedule 26.05.2013

arrow_upward
1
arrow_downward

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

person Lurk21    schedule 07.06.2013