在 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">×</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 并不能保证在所有浏览器中都有效。
我已阅读
- Are the PUT, DELETE, HEAD, etc methods available in most web browsers?
- http://annevankesteren.nl/2007/10/http-method-support
这些站点重申 PUT 可能无法在所有浏览器中工作,但应该在 FF 中工作。
最后,我用 FF21 完成了以下操作,并且 PUT 有效
我当然可以围绕这个进行设计,但在我看来这应该可行。我不想偷工减料,而是让 jQuery 的 .ajax 正常工作。
其他详细信息: * jQuery 版本 2.0.0 * 后端是Spring3
[编辑以添加 HTML]
最佳答案
当我访问 google.com 并按 f12 (firebug) 然后运行以下代码时,我无法在 Windows 上的 Firefox 21.0 上重新生成您的声明:
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 method not allowed 但更重要的是;当在控制台中打开连接的详细信息时,我可以看到 PUT,而不是 post。
当我访问http://jqueryui.com/autocomplete/#remote时并使用 url:"/resources/demos/autocomplete/search.php"运行代码(无需包含 JQuery),xml 成功结束,firebug 显示 PUT 请求。
我不知道可以在哪个网站上测试服务器端代码是否检测到 PUT 请求(Google 也拒绝 POST,因此它可能是 POST),但从 Firebug 报告的情况来看,它正在发送 PUT 请求。
[更新]
我可以确认,在 Firefox 21.0 上,上面的代码 100% 肯定会发出 PUT 请求。刚刚使用 .net 应用程序进行了测试,Chrome 27.0.1453.94 FF 均设置了 PUT 请求。
关于jquery - 为什么这个 jQuery AJAX PUT 在 Chrome 中有效,但在 FF 中无效,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16705366/