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

问题描述

在 Chrome 中，这就像它应该做的那样执行 HTTP PUT，但在 FireFox 21 中却没有.javascript 控制台或后端没有错误.

In Chrome this does an HTTP PUT just like it should, but in FireFox 21 it doesn't. There are no errors in the javascript console or in the backend.

这是 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:

And here is the 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 中不触发.

I have observed them in Fiddler, and the difference between working (Chrome) and not working (Firefox) is that the HTTP PUT fires in Chrome and does not fire in Firefox.

现在，我知道并非所有浏览器都保证 jQuery.ajax PUT.

Now, I know that jQuery.ajax PUT is not guaranteed in all browsers.

我读过

• 是 PUT、DELETE, HEAD 等方法在大多数网络浏览器中都可用?
• http://annevankesteren.nl/2007/10/http-method-support

这些网站重申 PUT 可能无法在所有浏览器中运行，但应该在 FF 中运行.

These sites reaffirm that PUT may not work in all browsers, but should work in FF.

最后，我用 FF21 和 PUT 实现了以下目标

Finally, I hit the following with FF21 and PUT works

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

我当然可以解决这个问题，但在我看来这应该可行.我宁愿不 jerry-rig 一些东西，而是让 jQuery 的 .ajax 正常工作.

I could certainly engineer around this, but it seems to me this should work. I would rather not jerry-rig something, but rather get jQuery's .ajax to work properly.

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

Other Details: * jQuery version 2.0.0 * Backend is Spring3

推荐答案

这是一个令人失望的答案.按钮单击正在提交表单，即使它不一定要这样做.我把 onsubmit="return false;"在表格中，问题得到了解决.

Here's a disappointing answer. The button click was submitting the form, even though it was not bound to do that. I put onsubmit="return false;" in the form and the problem was resolved.

这篇关于为什么这个 jQuery AJAX PUT 可以在 Chrome 中工作，但不能在 FF 中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！