HTML फॉर्म में PUT विधि का उपयोग करना

Question

क्या मैं सर्वर से फ़ॉर्म भेजने के लिए HTML फॉर्म में PUT पद्धति का उपयोग कर सकता हूं?

Answer 1

XHTML 1.x फॉर्म केवल GET और POST का समर्थन करते हैं। "विधि" विशेषता के लिए GET और POST एकमात्र अनुमत मान हैं।

Comments

XHTML कुछ पुराना है। अभी भी ऐसा लगता है कि html5 developer.mozilla.org/en-US/docs/Web/HTML/Element/…

— jakubiszon

Answer 2

HTML मानक के अनुसार , आप नहीं कर सकते । विधि विशेषता के लिए ही मान्य मान हैं getऔर post, प्राप्त और पोस्ट HTTP विधियों के लिए इसी। <form method="put">HTML अमान्य है और उसके साथ ऐसा व्यवहार किया जाएगा <form>, अर्थात GET अनुरोध भेजें।

इसके बजाय, कई फ्रेमवर्क HTTP विधि को सुरंग बनाने के लिए बस एक POST पैरामीटर का उपयोग करते हैं:

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

बेशक, इसके लिए सर्वर-साइड अल्ट्रापॉपिंग की आवश्यकता होती है।

Comments

आप एक मसौदे को जोड़ रहे हैं, अंतिम मानक नहीं। बस ध्यान देने योग्य, स्थिर HTML संस्करण इसकी पेशकश नहीं करते हैं।

— हकेर

@hakre HTML5 पहले से ही वास्तविक है, और संभवतः समय के साथ विकसित होगा। W3C क्या कहता है "ड्राफ्ट" कम से कम 3 वर्षों में एक विकसित दस्तावेज है जो ब्राउज़र विक्रेताओं के इनपुट के साथ> 99% से अधिक है, और पहले से ही लागू किया गया है (कम से कम जब यह इस और सबसे गैर-गूढ़ वर्गों में आता है) उन सभी को हमेशा के लिए। लेकिन सिर्फ नाइटपिकर के लिए, यहां HTML 4.01 (W3C की शर्तों में एक तकनीकी अनुरोध) के बराबर परिभाषा दी गई है।

— फिहाग

कृपया बुरा न मानें, मैंने पहले ही लिखा था कि यह सिर्फ एक नोट है और अन्य HTML संस्करण इसे (XHTML 2 के थोड़े अपवाद के साथ) प्रदान नहीं करते हैं , लेकिन यह एक अप्रचलित मसौदा है)।

— हकेर

@ ठाकरे ने भरोसा दिलाया कि मैं बिल्कुल नाराज नहीं हूं। नाइटपिकर को निपटाते हुए, मुझे यह टिप्पणी करनी चाहिए कि एक्सएचटीएमएल तकनीकी रूप से एचटीएमएल नहीं है, हालांकि एक या दो समानताएं मिल सकती हैं;)

— फिएहग

Answer 3

क्या मैं HTML फॉर्म से सर्वर पर डेटा भेजने के लिए HTML फॉर्म में "पुट" विधि का उपयोग कर सकता हूं?

हां, आप कर सकते हैं, लेकिन ध्यान रखें कि इसका परिणाम PUT नहीं बल्कि GET अनुरोध होगा। यदि आप टैग की methodविशेषता के लिए अमान्य मान <form>का उपयोग करते हैं, तो ब्राउज़र डिफ़ॉल्ट मान का उपयोग करेगा get।

HTML फ़ॉर्म (HTML संस्करण 4 तक (, 5 ड्राफ़्ट) और XHTML 1) केवल HTTP अनुरोध विधियों के रूप में GET और POST का समर्थन करते हैं। इसके लिए एक वर्कअराउंड POST के माध्यम से एक छिपे हुए फॉर्म फ़ील्ड का उपयोग करके अन्य तरीकों को सुरंग करना है जो सर्वर द्वारा पढ़ा जाता है और अनुरोध तदनुसार भेजा जाता है। XHTML 2.0 एक बार समर्थन मिलता है, पोस्ट, डाल करने के लिए योजना बनाई है और रूपों के लिए हटा, लेकिन यह में जा रहा है XHTML5 के एचटीएमएल 5 , जो समर्थन डाल करने के लिए योजना नहीं है। ^{[इस अपडेट करें]}

आप वैकल्पिक रूप से एक फॉर्म की पेशकश कर सकते हैं, लेकिन इसे सबमिट करने के बजाय, जावास्क्रिप्ट द्वारा PUT पद्धति का उपयोग करके XMLHttpRequest को बनाएं और फायर करें।

Comments

HTML FORMS के साथ PUT और DELETE का समर्थन करना

— Eugen Konkov

एक AJAX अनुरोध पूरी तरह से एक फॉर्म अनुरोध को प्रतिस्थापित नहीं कर सकता क्योंकि एक फॉर्म अनुरोध उपयोगकर्ता को दिए गए संसाधन पर पुनर्निर्देशित करता है। उदाहरण के लिए मार्ग के पृष्ठ को ब्राउज़र में दिखाने के लिए फिलहाल कोई रास्ता नहीं है PUT /resource।

— जैकोपोस्टैन्ची

ऐसा करना एक बुरा विचार है। फ्रेमवर्क PUTs के लिए फॉर्म पैरामीटर की अनदेखी कर सकते हैं। Java का HTTPServlet लगता है। हमारे पास एक बग HttpRequest.getParameterMap()था जहां फॉर्म पैरामीटर नहीं लौटे।

— 17

@DaBlick: लेकिन XMLHttpRequests के लिए नहीं? यदि ऐसा है तो भ्रूण एपीआई पर निर्भर अधिक मानकीकृत किया जाना चाहिए।

— १re

Answer 4

_method छिपी हुई फ़ील्ड वर्कअराउंड

निम्नलिखित सरल तकनीक कुछ वेब फ्रेमवर्क द्वारा उपयोग की जाती है:

• _methodकिसी भी रूप में छिपा हुआ पैरामीटर जोड़ें जो GET या POST नहीं है:

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

  यह HTML निर्माण सहायक विधि के माध्यम से चौखटे में स्वचालित रूप से किया जा सकता है।

• POST को वास्तविक रूप विधि तय करें ( <form method="post")

• _methodसर्वर पर प्रक्रियाएं करता है और ठीक उसी तरह करता है जैसे कि वास्तविक POST के बजाय उस विधि को भेजा गया था

आप इसे प्राप्त कर सकते हैं:

• रेल: form_tag
• Laravel: @method("PATCH")

शुद्ध HTML में तर्क / इतिहास संभव नहीं है: /software/114156/why-there-are-no-put-and-delete-methods-in-html-forms

Comments

लारवेल (php) के पास एक ही विशेषता है@method("PATCH")

— santiago arizti

यह एक उचित समाधान की तरह लगता है, लेकिन फिर भी दुर्भाग्यपूर्ण है, क्योंकि यह डिबगिंग को कठिन बनाता है। उदाहरण के लिए, यदि आपको कुछ चीजों को सत्यापित करने के लिए सर्वर लॉग के माध्यम से जाने या नेटवर्क विश्लेषण करने की आवश्यकता है, तो आपको सही आउटपुट नहीं दिखाई देगा, क्योंकि HTTP हेडर में HTTP पद्धति का उपयोग अभी भी किया जा रहा है POSTऔर न कि आपको वास्तव में क्या चाहिए।

— code_dredd

Answer 5

दुर्भाग्य से, आधुनिक ब्राउज़र HTTP PUT अनुरोधों के लिए मूल समर्थन प्रदान नहीं करते हैं। इस सीमा के आसपास काम करने के लिए, अपने HTML फॉर्म की विधि विशेषता "पोस्ट" सुनिश्चित करें, फिर अपने HTML में एक विधि ओवरराइड पैरामीटर जोड़ें जैसे:

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

अपने अनुरोधों का परीक्षण करने के लिए आप "पोस्टमैन" एक Google क्रोम एक्सटेंशन का उपयोग कर सकते हैं

Comments

इसे DELETE AND PATCH आदि किसी भी विधि के लिए काम करना चाहिए

— Tofeeq

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

तब जेएस वांछित तरीकों को करने के लिए कार्य करता है:

<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/ मेरी बहुत मदद करता है!

इसके अलावा, आप पोस्टमैथ फंक्शन सेट कर सकते हैं और POST और GET सबमिट करने के तरीकों को संभालने के लिए GetMethod को सेट कर सकते हैं जैसे कि आप डिफ़ॉल्ट डेटा को पसंद करते हैं। आप इसके बजाय जो चाहें उपयोग कर सकते हैंlocation.reload() , जैसे सफल बदलाव या सफल विलोपन का संदेश दिखाना।

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

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