Menggunakan metode PUT dalam bentuk HTML

Bisakah saya menggunakan metode PUT dalam formulir HTML untuk mengirim data dari formulir ke server?

Formulir XHTML 1.x hanya mendukung GET dan POST. GET dan POST adalah satu-satunya nilai yang diizinkan untuk atribut "metode".

Menurut standar HTML , Anda tidak bisa . Satu-satunya nilai yang valid untuk atribut metode adalah getdan post, sesuai dengan metode GET dan POST HTTP. <form method="put">tidak valid HTML dan akan diperlakukan seperti <form>, yaitu mengirim permintaan GET.

Sebagai gantinya, banyak kerangka kerja hanya menggunakan parameter POST untuk tunnel metode HTTP:

<form method="post" ...>
  <input type="hidden" name="_method" value="put" />
...

Tentu saja, ini membutuhkan pembukaan sisi server.

Bisakah saya menggunakan metode "Put" dalam bentuk html untuk mengirim data dari Formulir HTML ke server?

Ya Anda bisa, tetapi perlu diingat bahwa itu tidak akan menghasilkan PUT tetapi permintaan GET. Jika Anda menggunakan nilai yang tidak valid untuk methodatribut <form>tag, browser akan menggunakan nilai default get.

Formulir HTML (hingga HTML versi 4 (, 5 Draf) dan XHTML 1) hanya mendukung GET dan POST sebagai metode permintaan HTTP. Solusi untuk ini adalah untuk tunnel metode lain melalui POST dengan menggunakan bidang formulir tersembunyi yang dibaca oleh server dan permintaan dikirim sesuai. XHTML 2.0 pernah direncanakan untuk mendukung GET, POST, PUT dan DELETE untuk formulir, tetapi akan masuk ke XHTML5 dari HTML5 , yang tidak berencana untuk mendukung PUT. ^{[perbarui ke]}

Anda juga dapat menawarkan formulir, tetapi alih-alih mengirimkannya, buat dan jalankan XMLHttpRequest menggunakan metode PUT dengan JavaScript.

_method solusi bidang tersembunyi

Teknik sederhana berikut digunakan oleh beberapa kerangka kerja web:

• tambahkan _methodparameter tersembunyi ke formulir apa pun yang bukan GET atau POST:

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

  Ini dapat dilakukan secara otomatis dalam kerangka kerja melalui metode pembantu pembuatan HTML.

• perbaiki metode form aktual ke POST ( <form method="post")

• memproses _methoddi server dan melakukan persis seolah-olah metode yang telah dikirim bukan POST yang sebenarnya

Anda dapat mencapai ini di:

• Rel: form_tag
• Laravel: @method("PATCH")

Dasar pemikiran / sejarah mengapa itu tidak mungkin dalam HTML murni: /software/114156/why-there-are-no-put-and-delete-methods-in-html-forms

Sayangnya, browser modern tidak menyediakan dukungan asli untuk permintaan HTTP PUT. Untuk mengatasi batasan ini, pastikan atribut metode formulir HTML Anda adalah "posting", lalu tambahkan metode override parameter ke formulir HTML Anda seperti ini:

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

Untuk menguji permintaan Anda, Anda dapat menggunakan "tukang pos" ekstensi google chrome

Untuk mengatur metode PUT dan HAPUS saya lakukan sebagai berikut:

<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>

Kemudian JS bertindak untuk melakukan metode yang diinginkan:

<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>

Dengan fungsi-fungsi ini didefinisikan, saya menambahkan pendengar acara ke tombol-tombol yang membuat permintaan metode formulir:

<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>

Dan untuk tombol hapus pada formulir PUT:

<script>
  document.querySelectorAll( "[name=remove_data]" ).forEach( element => {
    var button = element;
    button.addEventListener( "click", deleteMethod );
</script>

_ - - - - - - - - - -

Artikel ini https://blog.garstasio.com/you-dont-need-jquery/ajax/ banyak membantu saya!

Di luar ini, Anda dapat mengatur fungsi postMethod dan getMethod untuk menangani metode POST dan GET mengirimkan yang Anda inginkan sebagai gantinya perilaku default browser. Anda dapat melakukan apa pun yang ingin Anda gunakan sebagai gantinya location.reload(), seperti menampilkan pesan perubahan yang berhasil atau penghapusan yang sukses.

= - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = -

JSFiddle: https://jsfiddle.net/enriquerene/d6jvw52t/53/