問題描述
在 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">×</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 中工作的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！