Можно ли использовать метод PUT в форме HTML для отправки данных из формы на сервер?
Использование метода PUT в HTML-форме
Ответ 1
XHTML 1.x поддерживает только GET и POST. GET и POST являются единственными допустимыми значениями для атрибут "метод".
Ответ 2
Согласно стандарту HTML, вы не можете. Единственными допустимыми значениями для атрибута метода являются get и post, соответствующие HTTP-методам GET и POST. <form method="put"> является недопустимым HTML и будет обрабатываться как <form>, т.е. отправлять запрос GET.
Вместо этого многие фреймворки просто используют параметр POST для туннелирования метода HTTP:
<form method="post" ...>
<input type="hidden" name="_method" value="put" />
...
Конечно, это требует развертывания на стороне сервера.
Ответ 3
Можно ли использовать метод "Put" в html-форме для отправки данных из HTML-формы на сервер?
Да, вы можете, но имейте в виду, что это приведет не к PUT, а к GET-запросу. Если вы используете недопустимое значение для атрибута method <form>, браузер будет использовать значение по умолчанию get.
HTML-формы (до HTML версии 4 (, 5 Draft) и XHTML 1) поддерживают только GET и POST как методы HTTP-запроса. Обходной путь для этого состоит в том, чтобы туннелировать другие методы через POST, используя скрытое поле формы, которое читается сервером, и запрос отправляется соответственно. Когда-то XHTML 2.0 планировал поддерживать GET, POST, PUT и DELETE для форм, но в XHTML5 HTML5, который не планирует поддерживать PUT. [обновить до]
В качестве альтернативы вы можете предложить форму, но вместо ее отправки создайте и запустите XMLHttpRequest, используя метод PUT с JavaScript.
Ответ 4
_method обхода скрытого поля
Следующая простая техника используется несколькими веб-фреймворками:
-
добавьте скрытый параметр
_methodв любую форму, которая не является GET или POST:<input type="hidden" name="_method" value="PUT">Это может быть сделано автоматически в рамках через вспомогательный метод создания HTML.
-
исправить фактический метод формы в POST (
<form method="post") -
обрабатывает
_methodна сервере и делает точно так, как если бы этот метод был отправлен вместо фактического POST
Вы можете достичь этого в:
- Rails:
form_tag - Laravel:
@method("PATCH")
Обоснование/история того, почему это невозможно в чистом HTML: https://softwareengineering.stackexchange.com/questions/114156/why-there-are-no-put-and-delete-methods-in-html-forms
Ответ 5
К сожалению, современные браузеры не предоставляют встроенную поддержку запросов HTTP PUT. Чтобы обойти это ограничение, убедитесь, что атрибут метода HTML-форм является "post", затем добавьте параметр переопределения метода в вашу HTML-форму следующим образом:
<input type="hidden" name="_METHOD" value="PUT"/>
Чтобы протестировать ваши запросы, вы можете использовать "Postman" расширение хром Google
Ответ 6
Для установки методов 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(), например, показывать сообщение об успешных изменениях или успешном удалении.
= - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = -