Sử dụng phương pháp PUT ở dạng HTML

Tôi có thể sử dụng phương thức PUT trong biểu mẫu HTML để gửi dữ liệu từ biểu mẫu đến máy chủ không?

Các biểu mẫu XHTML 1.x chỉ hỗ trợ GET và POST. GET và POST là các giá trị được phép duy nhất cho thuộc tính "phương thức".

Theo tiêu chuẩn HTML , bạn không thể . Các giá trị hợp lệ duy nhất cho thuộc tính phương thức là getvà post, tương ứng với các phương thức GET và POST HTTP. <form method="put">là HTML không hợp lệ và sẽ được xử lý như thế <form>, tức là gửi yêu cầu GET.

Thay vào đó, nhiều khung công tác chỉ cần sử dụng tham số POST để tạo đường hầm cho phương thức HTTP:

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

Tất nhiên, điều này đòi hỏi phải mở ra phía máy chủ.

Tôi có thể sử dụng phương thức "Đặt" ở dạng html để gửi dữ liệu từ Biểu mẫu HTML đến máy chủ không?

Có, bạn có thể, nhưng hãy nhớ rằng nó sẽ không dẫn đến PUT mà là yêu cầu NHẬN. Nếu bạn sử dụng giá trị không hợp lệ cho methodthuộc tính của <form>thẻ, trình duyệt sẽ sử dụng giá trị mặc định get.

Các biểu mẫu HTML (tối đa HTML phiên bản 4 (, 5 Bản nháp) và XHTML 1) chỉ hỗ trợ GET và POST dưới dạng phương thức yêu cầu HTTP. Một cách giải quyết cho vấn đề này là tạo đường hầm cho các phương thức khác thông qua POST bằng cách sử dụng trường biểu mẫu ẩn được đọc bởi máy chủ và yêu cầu được gửi đi tương ứng. XHTML 2.0 từng được lên kế hoạch để hỗ trợ GET, POST, PUT và DELETE cho các biểu mẫu, nhưng nó sẽ đi vào XHTML5 của HTML5 , không có kế hoạch hỗ trợ PUT. ^{[Cập nhật lên]}

Ngoài ra, bạn có thể cung cấp một biểu mẫu, nhưng thay vì gửi nó, hãy tạo và kích hoạt XMLHttpRequest bằng phương thức PUT với JavaScript.

_method ẩn trường giải pháp

Kỹ thuật đơn giản sau đây được sử dụng bởi một vài khung web:

• thêm một _methodtham số ẩn vào bất kỳ dạng nào không phải là GET hoặc POST:

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

  Điều này có thể được thực hiện tự động trong các khung thông qua phương thức trợ giúp tạo HTML.

• sửa phương thức biểu mẫu thực tế thành POST ( <form method="post")

• xử lý _methodtrên máy chủ và thực hiện chính xác như thể phương thức đó đã được gửi thay vì POST thực tế

Bạn có thể đạt được điều này trong:

• Đường ray: form_tag
• Ấu trùng: @method("PATCH")

Lý do / lịch sử tại sao không thể có trong HTML thuần túy: /software/114156/why-there-are-no-put-and-delete-methods-in-html-forms

Thật không may, các trình duyệt hiện đại không cung cấp hỗ trợ riêng cho các yêu cầu HTTP PUT. Để khắc phục giới hạn này, hãy đảm bảo thuộc tính phương thức của biểu mẫu HTML của bạn là Đăng bài, sau đó thêm tham số ghi đè phương thức vào biểu mẫu HTML của bạn như sau:

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

Để kiểm tra yêu cầu của bạn, bạn có thể sử dụng "Người đưa thư" một tiện ích mở rộng của Google chrome

Để thiết lập các phương thức PUT và DELETE tôi thực hiện như sau:

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

Sau đó, JS hành động để thực hiện các phương thức mong muốn:

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

Với các hàm này được xác định, tôi thêm một trình lắng nghe sự kiện vào các nút tạo yêu cầu phương thức biểu mẫu:

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

Và đối với nút loại bỏ trên biểu mẫu PUT:

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

_ - - - - - - - - - - -

Bài viết này https://blog.garstasio.com/you-dont-need-jquery/ajax/ giúp tôi rất nhiều!

Ngoài ra, bạn có thể đặt chức năng postMethod và getMethod để xử lý các phương thức gửi POST và GET theo ý muốn thay vì hành vi mặc định của trình duyệt. Bạn có thể làm bất cứ điều gì bạn muốn thay vì sử dụng location.reload(), như hiển thị thông báo về những thay đổi thành công hoặc xóa thành công.

= = = = = = = = =

Mã thông báo: https://jsfiddle.net/enriquerene/d6jvw52t/53/