回答:
XHTML 1.xフォームはGETとPOSTのみをサポートします。GETおよびPOSTは、「メソッド」属性に許可される唯一の値です。
HTML標準によれば、これはできません。method属性の有効な値はget
and のみでありpost
、GETおよびPOST HTTPメソッドに対応しています。<form method="put">
は無効なHTMLであり、次のように扱われます<form>
ます。つまり、GETリクエストを送信します。
代わりに、多くのフレームワークは単にPOSTパラメータを使用してHTTPメソッドをトンネルします。
<form method="post" ...>
<input type="hidden" name="_method" value="put" />
...
もちろん、これにはサーバー側のアンラップが必要です。
HTMLフォームの「Put」メソッドを使用して、HTMLフォームからサーバーにデータを送信できますか?
はい、できますが、PUTではなくGETリクエストになることに注意してください。タグのmethod
属性に無効な値を使用する<form>
と、ブラウザはデフォルト値を使用しますget
。
HTMLフォーム(HTMLバージョン4(5 Draft)およびXHTML 1まで)は、HTTP要求メソッドとしてGETおよびPOSTのみをサポートします。これの回避策は、サーバーによって読み取られる非表示のフォームフィールドを使用してPOSTを介して他のメソッドをトンネルし、それに応じて要求をディスパッチすることです。XHTML 2.0は、フォームのGET、POST、PUT、DELETEをサポートする予定でしたが、PUT をサポートする予定はないHTML5のXHTML5に入る予定です。[更新]
代わりにフォームを提供することもできますが、フォームを送信する代わりに、JavaScriptでPUTメソッドを使用してXMLHttpRequestを作成して起動します。
PUT /resource
。
HttpRequest.getParameterMap()
フォームパラメータを返さないバグがありました。
_method
隠しフィールドの回避策
次の簡単な手法は、いくつかのWebフレームワークで使用されています。
_method
GETまたはPOSTではないフォームに非表示パラメーターを追加します。
<input type="hidden" name="_method" value="PUT">
これは、HTML作成ヘルパーメソッドを介してフレームワークで自動的に実行できます。
実際のフォームメソッドをPOST(<form method="post"
)に修正します
_method
サーバーでプロセスを実行し、実際のPOSTの代わりにそのメソッドが送信された場合とまったく同じように処理します
これは次の方法で実現できます。
form_tag
@method("PATCH")
理論的根拠/純粋なHTMLでは不可能である理由の履歴:https : //softwareengineering.stackexchange.com/questions/114156/why-there-are-no-put-and-delete-methods-in-html-forms
@method("PATCH")
POST
必要であり、実際に必要なものではないため、正しい出力が表示されません。
残念ながら、最近のブラウザーはHTTP PUT要求のネイティブサポートを提供していません。この制限を回避するには、HTMLフォームのmethod属性が「post」であることを確認してから、次のようにメソッドオーバーライドパラメーターをHTMLフォームに追加します。
<input type="hidden" name="_METHOD" value="PUT"/>
リクエストをテストするには、Google Chrome拡張機能の「Postman」を使用できます
メソッド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()
、変更の成功や削除の成功を示すメッセージを表示、好きなます。
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
JSFiddle:https ://jsfiddle.net/enriquerene/d6jvw52t/53/