我可以在HTML表单中使用PUT方法将数据从表单发送到服务器吗?
当前回答
_method隐藏字段的解决方法
以下是一些web框架使用的简单技术:
添加一个隐藏的_method参数到任何不是GET或POST的表单: <input type="hidden" name="_method" value="PUT"> 这可以通过HTML创建助手方法在框架中自动完成。 将实际的表单方法固定为POST (<form method=" POST ") 进程_method在服务器上，并做的就像该方法已经发送而不是实际的POST
你可以通过以下方法实现:
Rails: form_tag 中@ method (Laravel:“补丁”)
为什么它在纯HTML中是不可能的原理/历史:https://softwareengineering.stackexchange.com/questions/114156/why-there-are-no-put-and-delete-methods-in-html-forms
其他回答
根据HTML标准，你不能。方法属性的唯一有效值是get和post，对应于get和post HTTP方法。<form method="put">是无效的HTML，将被视为<form>，即发送一个GET请求。
相反，许多框架只是简单地使用POST参数来隧道HTTP方法:
<form method="post" ...>
<input type="hidden" name="_method" value="put" />
...
当然，这需要服务器端展开。
如果你正在使用nodejs，你可以安装包方法覆盖，让你使用一个中间件来做这件事。 文档链接:http://expressjs.com/en/resources/middleware/method-override.html
安装后，我所要做的就是:
var methodOverride = require('method-override')
app.use(methodOverride('_method'))
_method隐藏字段的解决方法
以下是一些web框架使用的简单技术:
添加一个隐藏的_method参数到任何不是GET或POST的表单: <input type="hidden" name="_method" value="PUT"> 这可以通过HTML创建助手方法在框架中自动完成。 将实际的表单方法固定为POST (<form method=" POST ") 进程_method在服务器上，并做的就像该方法已经发送而不是实际的POST
你可以通过以下方法实现:
Rails: form_tag 中@ method (Laravel:“补丁”)
为什么它在纯HTML中是不可能的原理/历史:https://softwareengineering.stackexchange.com/questions/114156/why-there-are-no-put-and-delete-methods-in-html-forms
简单地说——不。
我尝试在HTML表单中触发一个put请求，但它将POST请求发送到服务器。要添加PUT请求-
我们可以通过监听脚本中的提交操作，然后将put请求发送到特定端点来实现这一点。
http-server环境的截图。测验
要设置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表单上的remove按钮:
<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()做任何你想做的事情，比如显示成功更改或成功删除的消息。
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
JSFiddle: https://jsfiddle.net/enriquerene/d6jvw52t/53/
