在HTML格式中使用PUT方法

我可以在HTML表单中使用PUT方法将数据从表单发送到服务器吗？

根据，您可以而不是。method属性的唯一有效值是

get

和

post

，对应于get和post HTTP方法<代码>是无效的HTML，将被视为

，即发送GET请求

相反，许多框架只是使用POST参数来隧道HTTP方法：

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

...

---

当然，这需要服务器端展开。

XHTML1.x表单只支持GET和POST。GET和POST是的唯一允许值 “方法”属性

我可以在html表单中使用“Put”方法将数据从html表单发送到服务器吗

是的，您可以，但请记住，这不会导致PUT请求，而是GET请求。如果对

标记的

方法

属性使用无效值，浏览器将使用默认值

get

HTML表单（直到HTML版本4（，5草稿）和XHTML1）只支持GET和POST as HTTP请求方法。解决方法是使用隐藏的表单字段（服务器读取该字段并相应地发送请求），通过POST隧道其他方法。曾经计划支持表单的GET、POST、PUT和DELETE，但它将进入of，而of不计划支持PUT

---

您也可以提供表单，但不是提交表单，而是使用JavaScript的PUT方法创建并启动XMLHttpRequest。

\u方法

隐藏字段解决方法

一些web框架使用以下简单技术：

• 将隐藏的

  \u方法

  参数添加到任何未获取或发布的表单：

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

  这可以通过HTML创建助手方法在框架中自动完成

---

• 修复要发布的实际表单方法（

  不幸的是，现代浏览器不提供对HTTP PUT请求的本机支持。若要解决此限制，请确保HTML表单的“方法”属性为“POST”，然后向HTML表单添加一个方法覆盖参数，如下所示：
  
  <input type="hidden" name="_METHOD" value="PUT"/>
  
  
  
  要测试您的请求，您可以使用“Postman”和google chrome扩展来设置我执行的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>
  
  var methodOverride = require('method-override')
  app.use(methodOverride('_method'))
  
  
  保存更改
  去除
  
  删除项目
  
  然后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>
  
  
  var putMethod=（事件）=>{
  //阻止窗体单击的重定向
  event.preventDefault（）；
  var target=event.target；
  while（target.tagName！=“FORM”）{
  target=target.parentElement；
  }//虽然目标不是te FORM标记，但它会查找父元素
  //action属性提供请求URL
  var url=target.getAttribute（“操作”）；
  //通过名称属性上的前缀“put_”收集表单数据
  var bodyForm=target.querySelectorAll（“[name^=put_z]”）；
  var body={}；
  bodyForm.forEach（元素=>{
  //我使用split将前缀和worthname属性分开
  var nameArray=element.getAttribute（“名称”）.split（“”）；
  var name=nameArray[nameArray.length-1]；
  if（element.tagName！=“TEXTAREA”）{
  var value=element.getAttribute（“值”）；
  }否则{
  //若元素为textarea，则value属性可能返回null或未定义
  var value=element.innerHTML；
  }
  //name=“put_*”的所有元素都在主体对象中注册了值
  body[名称]=值；
  } );
  var xhr=new XMLHttpRequest（）；
  xhr.open（“PUT”，url）；
  setRequestHeader（“内容类型”、“应用程序/json”）；
  xhr.onload=（）=>{
  如果（xhr.status==200）{
  //reload（）使用缓存，reload（true）强制不使用缓存。我重新加载页面以在提交时使HTML表单“重定向正常效果”。您可以改为操作DOM。
  位置。重新加载（true）；
  }否则{
  log（xhr.status，xhr.responseText）；
  }
  }
  xhr.send（body）；
  }
  var deleteMethod=（事件）=>{
  event.preventDefault（）；
  var confirm=window.confirm（“Certeza em deletar este conteúdo？”）；
  如果（确认）{
  var target=event.target；
  while（target.tagName！=“FORM”）{
  target=target.parentElement；
  }
  var url=target.getAttribute（“操作”）；
  var xhr=new XMLHttpRequest（）；
  xhr.open（“删除”，url）；
  setRequestHeader（“内容类型”、“应用程序/json”）；
  xhr.onload=（）=>{
  如果（xhr.status==200）{
  位置。重新加载（true）；
  console.log（xhr.responseText）；
  }否则{
  log（xhr.status，xhr.responseText）；
  }
  }
  xhr.send（）；
  }
  }
  
  定义了这些函数后，我向发出表单方法请求的按钮添加了一个事件侦听器：
  
  <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>
  
  
  document.querySelectorAll（“[name=update\u data]，[name=delete\u data]”）。forEach（元素=>{
  var按钮=元素；
  var形式=元素；
  while（form.tagName！=“form”）{
  form=form.parentElement；
  }
  var method=form.getAttribute（“方法”）；
  如果（方法==“卖出”）{
  按钮。addEventListener（“单击”，putMethod）；
  }
  如果（方法==“删除”）{
  按钮。addEventListener（“单击”，删除方法）；
  }
  } );
  
  对于PUT表单上的“删除”按钮：
  
  <script>
    document.querySelectorAll( "[name=remove_data]" ).forEach( element => {
      var button = element;
      button.addEventListener( "click", deleteMethod );
  </script>
  
  
  document.querySelectorAll（“[name=remove\u data]”）。forEach（元素=>{
  var按钮=元素；
  按钮。addEventListener（“单击”，删除方法）；
  
  _——————————————
  
  这篇文章对我帮助很大
  
  除此之外，您还可以设置postMethod函数和getMethod来处理POST和GET提交方法，而不是浏览器默认行为。您可以使用
  location.reload（）
  ，如show messag，执行任何操作
  var methodOverride = require('method-override')
  app.use(methodOverride('_method'))