Question

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

我当然可以设计这个，但在我看来这应该有效。我宁愿不偷偷摸摸的东西，而是让jQuery的.ajax正常工作。

其他细节： * jQuery版本2.0.0 *后端是Spring3

[编辑以添加HTML]

Answer 1

我无法在Windows上对firefox 21.0提出索赔，当我去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请求（谷歌也拒绝POST，因此它可能是一个POST），但从Firebug报告的外观来看，它正在发送一个PUT请求。 / p>

<强> [UPDATE]

我可以确认在Firefox 21.0上，上面的代码是100％确定发出PUT请求。刚刚使用.net应用程序对其进行了测试，并且Chrome 27.0.1453.94 FF都设置了PUT请求。

Answer 2

我想你可能会遗漏其他东西 - 这个jsFiddle在最新的Chrome和Firefox 21上做了PUT请求：

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

您没有指定要发送到服务器的内容类型。我有一个类似的问题，服务器甚至没有尝试从查询中读取数据，因为它不知道提供的格式是什么，所以它只是忽略它。

为jQuery请求指定dataType时，您只是告诉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，您可以使用as reference。

Answer 4

这是一个令人失望的答案。按钮单击是提交表单，即使它没有限制这样做。我把onsubmit =“return false;”在形式和问题得到解决。

为什么这个jQuery AJAX PUT在Chrome中工作但不在FF中工作

4 个答案: