我可以在HTML表单中使用PUT方法将数据从表单发送到服务器吗？
答案 0 :(得分：166)
根据HTML standard，您可以不。 method属性的唯一有效值是get和post，对应于GET和POST HTTP方法。 <form method="put">是无效的HTML，会被视为<form>，即发送GET请求。
相反，许多框架只使用POST参数来隧道传输HTTP方法：
<form method="post" ...>
<input type="hidden" name="_method" value="put" />
...
当然，这需要服务器端解包。
答案 1 :(得分：100)
XHTML 1.x表单仅支持GET和POST。 GET和POST是唯一允许的值 “方法”属性。
答案 2 :(得分：41)
我可以使用html格式的“Put”方法将数据从HTML表单发送到服务器吗？
是的，你可以，但请记住，它不会导致PUT而是GET请求。如果您对method标记的<form>属性使用无效值，则浏览器将使用默认值get。
HTML表单（最高为HTML版本4（，5草稿）和XHTML 1）仅支持GET和POST作为HTTP请求方法。解决方法是使用隐藏的表单字段通过POST隧道其他方法，该字段由服务器读取并相应地分派请求。 XHTML 2.0曾计划支持表单的GET，POST，PUT和DELETE，但它会进入XHTML5的HTML5，它不打算支持PUT。 [update to]
您也可以提供表单，但不是提交表单，而是使用带有JavaScript的PUT方法创建和触发XMLHttpRequest。
答案 3 :(得分：16)
_method隐藏字段解决方法
这种方法由Rails使用，可以适用于任何框架/项目：
将隐藏的_method参数添加到任何非GET或POST的表单中：
<input type="hidden" name="_method" value="PUT">
这可以通过HTML创建帮助器方法在框架中自动完成（例如Rails form_tag）
将实际的表单方法修复为POST（<form method="post"）
处理服务器上的_method，就像发送该方法而不是实际的POST一样
答案 4 :(得分：8)
不幸的是，现代浏览器不提供对HTTP PUT请求的本机支持。要解决此限制，请确保HTML表单的方法属性为“post”，然后将方法覆盖参数添加到HTML表单中，如下所示：
<input type="hidden" name="_METHOD" value="PUT"/>
要测试您的请求，您可以使用＆＃34; Postman＆＃34;谷歌浏览器扩展程序
答案 5 :(得分：1)
如果您使用 nodejs，您可以安装包 method-override，让您可以使用中间件执行此操作。
文档链接：http://expressjs.com/en/resources/middleware/method-override.html
安装后，我所要做的就是：
var methodOverride = require('method-override')
app.use(methodOverride('_method'))
答案 6 :(得分：0)
要设置方法PUT和DELETE，请执行以下操作：
<form
method="PUT"
action="domain/route/param?query=value"
>
<input type="hidden" name="delete_id" value="1" />
<input type="hidden" name="put_id" value="1" />
<input type="text" name="put_name" value="content_or_not" />
<div>
<button name="update_data">Save changes</button>
<button name="remove_data">Remove</button>
</div>
</form>
<hr>
<form
method="DELETE"
action="domain/route/param?query=value"
>
<input type="hidden" name="delete_id" value="1" />
<input type="text" name="delete_name" value="content_or_not" />
<button name="delete_data">Remove item</button>
</form>
然后JS起作用以执行所需的方法：
<script>
var putMethod = ( event ) => {
// Prevent redirection of Form Click
event.preventDefault();
var target = event.target;
while ( target.tagName != "FORM" ) {
target = target.parentElement;
} // While the target is not te FORM tag, it looks for the parent element
// The action attribute provides the request URL
var url = target.getAttribute( "action" );
// Collect Form Data by prefix "put_" on name attribute
var bodyForm = target.querySelectorAll( "[name^=put_]");
var body = {};
bodyForm.forEach( element => {
// I used split to separate prefix from worth name attribute
var nameArray = element.getAttribute( "name" ).split( "_" );
var name = nameArray[ nameArray.length - 1 ];
if ( element.tagName != "TEXTAREA" ) {
var value = element.getAttribute( "value" );
} else {
// if element is textarea, value attribute may return null or undefined
var value = element.innerHTML;
}
// all elements with name="put_*" has value registered in body object
body[ name ] = value;
} );
var xhr = new XMLHttpRequest();
xhr.open( "PUT", url );
xhr.setRequestHeader( "Content-Type", "application/json" );
xhr.onload = () => {
if ( xhr.status === 200 ) {
// reload() uses cache, reload( true ) force no-cache. I reload the page to make "redirects normal effect" of HTML form when submit. You can manipulate DOM instead.
location.reload( true );
} else {
console.log( xhr.status, xhr.responseText );
}
}
xhr.send( body );
}
var deleteMethod = ( event ) => {
event.preventDefault();
var confirm = window.confirm( "Certeza em deletar este conteúdo?" );
if ( confirm ) {
var target = event.target;
while ( target.tagName != "FORM" ) {
target = target.parentElement;
}
var url = target.getAttribute( "action" );
var xhr = new XMLHttpRequest();
xhr.open( "DELETE", url );
xhr.setRequestHeader( "Content-Type", "application/json" );
xhr.onload = () => {
if ( xhr.status === 200 ) {
location.reload( true );
console.log( xhr.responseText );
} else {
console.log( xhr.status, xhr.responseText );
}
}
xhr.send();
}
}
</script>
在定义了这些功能之后，我将事件监听器添加到发出表单方法请求的按钮上：
<script>
document.querySelectorAll( "[name=update_data], [name=delete_data]" ).forEach( element => {
var button = element;
var form = element;
while ( form.tagName != "FORM" ) {
form = form.parentElement;
}
var method = form.getAttribute( "method" );
if ( method == "PUT" ) {
button.addEventListener( "click", putMethod );
}
if ( method == "DELETE" ) {
button.addEventListener( "click", deleteMethod );
}
} );
</script>
对于PUT表单上的删除按钮：
<script>
document.querySelectorAll( "[name=remove_data]" ).forEach( element => {
var button = element;
button.addEventListener( "click", deleteMethod );
</script>
_-----------
本文https://blog.garstasio.com/you-dont-need-jquery/ajax/对我有很大帮助！
除此之外，您可以根据需要设置postMethod函数和getMethod来处理POST和GET提交方法，而不是浏览器的默认行为。您可以使用location.reload()做任何您想做的事情，例如显示成功更改或成功删除的消息。
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
答案 7 :(得分：0)
我写了一个名为“html-form-enhancer”的 npm package。通过将其放入您的 HTML 源代码中，它会接管使用除 GET 和 POST 之外的方法提交的表单，并添加 application/json 序列化。
<script type=module" src="html-form-enhancer.js"></script>
<form method="PUT">
...
</form>
答案 8 :(得分：-1)
用于诱捕他人
<form method="post" ...>
@csrf
@method('put')
...
</form>