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

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.

我读过了

• 大多数Web浏览器中是否提供PUT,DELETE,HEAD等方法？
• http://annevankesteren.nl/2007/10/http-method-support

这些网站重申PUT可能不适用于所有浏览器,但应该在FF中工作.

最后,我用FF21和PUT工作了

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

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

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

[编辑添加HTML]

Answer 1

这是一个令人失望的答案。单击按钮正在提交表单，尽管它不一定会这样做。我把 onsubmit="return false;" 的形式，问题就解决了。