HTML 형식으로 PUT 메소드 사용

HTML 폼에서 PUT 메서드를 사용하여 폼에서 서버로 데이터를 보낼 수 있습니까?

XHTML 1.x 양식은 GET 및 POST 만 지원합니다. GET 및 POST는 "method"속성에 허용되는 유일한 값입니다.

HTML 표준 에 따르면 할 수 없습니다 . 방법 특성에 유효한 값은 다음 get과 post는 GET 및 HTTP POST의 방법에 대응. <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 초안) 및 XHTML 1)은 HTTP 요청 방법으로 GET 및 POST 만 지원합니다. 이에 대한 해결 방법은 서버에서 읽은 요청에 따라 숨겨진 양식 필드를 사용하여 POST를 통해 다른 방법을 터널링하고 그에 따라 요청을 전달하는 것입니다. XHTML 2.0 은 폼에 대해 GET, POST, PUT 및 DELETE를 지원할 계획이지만 PUT을 지원하지 않는 HTML5의 XHTML5 로 이동 합니다. ^{[업데이트]}

대안으로 양식을 제공 할 수 있지만 양식을 제출하는 대신 JavaScript와 함께 PUT 메소드를 사용하여 XMLHttpRequest를 작성하고 실행하십시오.

_method 숨겨진 필드 해결 방법

다음과 같은 간단한 기술이 몇 가지 웹 프레임 워크에서 사용됩니다.

• _methodGET 또는 POST가 아닌 양식에 숨겨진 매개 변수를 추가하십시오 .

  <input type="hidden" name="_method" value="PUT">

  이것은 HTML 생성 도우미 메소드를 통해 프레임 워크에서 자동으로 수행 될 수 있습니다.

• 실제 양식 메소드를 POST ( <form method="post") 로 수정하십시오.

• _method서버에서 처리 하고 실제 POST 대신 해당 메소드가 전송 된 것처럼 정확하게 수행

당신은 이것을 달성 할 수 있습니다 :

• 울타리: form_tag
• 라 라벨 : @method("PATCH")

순수 HTML에서 불가능한 이유 / 이력 : /software/114156/why-there-are-no-put-and-delete-methods-in-html-forms

불행히도 최신 브라우저는 HTTP PUT 요청에 대한 기본 지원을 제공하지 않습니다. 이 제한 사항을 해결하려면 HTML 양식의 메소드 속성이 "게시"인지 확인한 후 다음과 같이 메소드 대체 매개 변수를 HTML 양식에 추가하십시오.

<input type="hidden" name="_METHOD" value="PUT"/>

요청을 테스트하기 위해 Google 크롬 확장 프로그램 인 "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/