GET के बजाय एक लिंक का उपयोग POST करें

Question

मुझे यकीन नहीं है कि यह भी संभव है। लेकिन मैं सोच रहा था कि क्या किसी को पता है कि हाइपरलिंक कैसे बनाया जा सकता है कुछ चर और GET के विपरीत POST (एक फार्म की तरह) का उपयोग करें।

Comments

HTML ऐसा नहीं कर सकता। जावास्क्रिप्ट लिंक पर क्लिक करने की घटना को पकड़ सकता है और यदि आप एचटीएमएल को बदल नहीं सकते हैं तो आप क्या करना चाहते हैं और सीएसएस लिंक की तरह बटन को स्टाइल कर सकता है अगर यह केवल उपस्थिति की बात है।

— सिल्वेन

Answer 1

आप छिपे हुए इनपुट्स के साथ एक फॉर्म बनाते हैं, जो पोस्ट किए जाने वाले मानों को रखते हैं, फॉर्म की कार्रवाई को गंतव्य यूआरएल पर सेट करते हैं , और फॉर्म विधि पोस्ट करने के लिए । फिर, जब आपका लिंक क्लिक किया जाता है, तो एक जेएस फ़ंक्शन को ट्रिगर करें जो फ़ॉर्म को सबमिट करता है।

एक उदाहरण के लिए यहाँ देखें । यह उदाहरण शुद्ध जावास्क्रिप्ट का उपयोग करता है, जिसमें कोई jQuery नहीं है - आप इसे चुन सकते हैं यदि आप अपने पास पहले से अधिक कुछ भी स्थापित नहीं करना चाहते हैं।

<form name="myform" action="handle-data.php" method="post">
  <label for="query">Search:</label>
  <input type="text" name="query" id="query"/>
  <button>Search</button>
</form>

<script>
var button = document.querySelector('form[name="myform"] > button');
button.addEventListener(function() {
  document.querySelector("form[name="myform"]").submit();
});
</script>

Comments

यह स्वीकृत उत्तर क्यों है? यह प्रश्न विशेष रूप से GST के विपरीत POST (एक प्रपत्र की तरह) का उपयोग करने के लिए कहता है , फिर भी यह उत्तर कहता है " गंतव्य url और प्राप्त करने की विधि पर कार्रवाई निर्धारित करें "।

— माजिद फौलादपुर

मै समझ गया। जो मुझे समझ नहीं आ रहा है वह यह है: हम एक छिपे हुए फॉर्म को बनाने की परेशानी में चले जाते हैं ताकि हम POST कर सकें, लेकिन फिर, फॉर्म बनने के बाद, आप विधि को सेट करने का प्रस्ताव क्यों देते हैं GET? हम getफार्म के बिना था , है ना?

— माजिद फौलादपुर

तुम सही हो। यह एक त्रुटि थी, लेकिन किसी भी तरह से ओपी अभी भी सही हो गया (शायद इसमें शामिल लिंक के कारण जो बहुत स्पष्ट है)। इशारा करने के लिए धन्यवाद। मुझे लगता है कि पूरी तरह से rephrased।

— पलान्टिर

मैंने अधिक आधुनिक दृष्टिकोण का उपयोग करने के लिए आपके उत्तर को अपडेट किया। यदि आप असहमत हैं, तो इस संपादन को रोलबैक करने के लिए स्वतंत्र महसूस करें।

— माइकल पेर्लाकोव्स्की

इस प्रक्रिया में जावास्क्रिप्ट को शामिल करने का कोई कारण नहीं है। यह स्वीकृत उत्तर क्यों है?

— शाम

Answer 2

इसके लिए आपको जावास्क्रिप्ट की आवश्यकता नहीं है। बस यह स्पष्ट करना चाहता था कि जब से यह उत्तर पोस्ट किया गया था, तब से इस प्रश्न के सभी उत्तर किसी न किसी तरह से जावास्क्रिप्ट का उपयोग करते हैं।

आप इसे आसानी से शुद्ध एचटीएमएल और सीएसएस के साथ आसानी से कर सकते हैं, जिसमें छिपे हुए फ़ील्ड के साथ एक फॉर्म बना सकते हैं, जिसमें वह डेटा है जिसे आप सबमिट करना चाहते हैं, फिर लिंक की तरह दिखने के लिए फॉर्म के सबमिट बटन को स्टाइल करें।

उदाहरण के लिए:

.inline {
  display: inline;
}

.link-button {
  background: none;
  border: none;
  color: blue;
  text-decoration: underline;
  cursor: pointer;
  font-size: 1em;
  font-family: serif;
}
.link-button:focus {
  outline: none;
}
.link-button:active {
  color:red;
}

<a href="some_page">This is a regular link</a>

<form method="post" action="some_page" class="inline">
  <input type="hidden" name="extra_submit_param" value="extra_submit_value">
  <button type="submit" name="submit_param" value="submit_value" class="link-button">
    This is a link that sends a POST request
  </button>
</form>

आपकी साइट पर नियमित लिंक कैसे स्टाइल किए जाते हैं, इस पर निर्भर करते हुए आपके द्वारा उपयोग किए जाने वाले सटीक CSS भिन्न हो सकते हैं।

Comments

माना। मुझे ईमेल में ऐसा करने की ज़रूरत थी, इसलिए JS मेरे लिए ज्यादा विकल्प नहीं था। यह पूरी तरह से काम करना चाहिए

— SynackSA

मैं केवल एक बार इसे उभारने में सक्षम हूं। यह लगभग उतना ही दुखद है जितना कि सभी HTML प्रश्नों का 99.728% जावास्क्रिप्ट या jQuery की समस्याओं के साथ भ्रमित होना।

— राब

यह निश्चित रूप से एक बटन का उपयोग करने का एक सरल तरीका है जो लिंक की तरह दिखता है, लेकिन यह वास्तव में हार्ड-कोडिंग है। आपको वास्तव में उन स्थितियों को जानना होगा जो यह बटन हर मामले के लिए स्पष्ट रूप से रहने और सेट करने जा रहा है। मुझे लगता है कि जेएस / JQuery पर आधारित उत्तर अधिक सामान्य हैं क्योंकि वे लिंक तत्व का उपयोग स्वयं (या जो भी तत्व) कर रहे हैं।

— मकिश

@ Ajedi32 क्षमा करें, मेरी टिप्पणी इतनी स्पष्ट नहीं थी: मैं मुख्य रूप से यह कहने की कोशिश करता हूं कि यह बटन विशेष रूप से <रेखीय तत्व जैसा दिखता है। लेकिन अगर आप बटन को अन्य <a> तत्वों के चारों ओर लगाते हैं, जो अलग-अलग ढंग से स्टाइल किए जाते हैं, जैसे पेज के विभिन्न हिस्सों में आपको बटन के लिए <a> के सभी सीएसएस नियमों की नकल करनी होगी, होवर, विज़िट किए गए आदि के लिए नियम बनाने होंगे। अन्यथा यह जरूर काम करेगा, लेकिन यह बदसूरत दिखाई देगा। अन्य समाधानों के साथ, आपको बस किसी भी सीएसएस को बदलने की आवश्यकता नहीं है, आपको बस एक <a> तत्व प्राप्त करना है जो आपके पास पहले से ही है। बेशक शुद्ध एचटीएमएल के कुछ फायदे भी हैं।

— मकिह

@Robert AFAIK, अन्य प्रस्तावित समाधानों में से कोई भी मध्य-क्लिक के साथ काम नहीं करता है। यदि आप वास्तव में पांडित्यपूर्ण होना चाहते हैं, तो आप कह सकते हैं कि लिंक के साथ POST अनुरोध सबमिट करना असंभव है। आप केवल फ़ॉर्म और जावास्क्रिप्ट के साथ POST अनुरोध सबमिट कर सकते हैं।

— अजादि ३२

Answer 3

आप जावास्क्रिप्ट फ़ंक्शंस का उपयोग कर सकते हैं। JQuery का एक अच्छा पोस्ट फंक्शन है जिसमें आप इसका उपयोग करने का निर्णय लेते हैं:

JQuery पोस्ट

<script language="javascript"> 

   function DoPost(){
      $.post("WhateverPage.php", { name: "John", time: "2pm" } );  //Your values here..
   }

</script>

<a href="javascript:DoPost()">Click Here</A> 

Comments

यह पूछे जाने पर POST का अनुरोध करता है, लेकिन मैं इसका उपयोग नहीं कर सका क्योंकि मुझे अभी भी "जो भी हो।"

— क्रिस

$.post('page.php', {param: 1}, function() { window.location.href = 'page'.php' });

— JREAM

@mplungjan href कहते हैं जहां लिंक करने के लिए बात कर रहा है, जबकि मैं मानता हूँ यह भ्रमित व्यवहार और सामग्री के लिए गलत है कि, इस मामले में जावास्क्रिप्ट है संदर्भ। दूसरे शब्दों में "जब आप लिंक पर क्लिक करते हैं तो यह जावास्क्रिप्ट का उपयोग करके पोस्टबैक का प्रदर्शन करेगा"। क्लिक इवेंट को बाइंड करने से अधिक अर्थ है। "न तो कभी जावास्क्रिप्ट में जावास्क्रिप्ट का उपयोग करें" जैसे कठोर नियम किसी भी अन्य बुरे अभ्यास के समान बुरे हैं।

— मेनोल

@ मेनोल मैंने कहा: अनुशंसित नहीं। - "कभी उपयोग न करें"। यदि आप वास्तव में आप चाहते हैं और कर सकते <a href="whyjavascript.html" id="postIt">Click Here</a>हैं$("#postIt").on("click",function(e) { e.preventDefault(); $.post("WhateverPage.php", { name: "John", time: "2pm" } ); });

— mplungjan

@mplungjan किसी अन्य की तरह अनुशंसा करते हैं ताकि भ्रमित सामग्री / व्यवहार से बचा जा सके। जब एक सिफारिश को बाहर के मामलों में आगे लाया जाता है, तो इसका उद्देश्य एक कठिन नियम के रूप में दिखाई देने लगता है। आपके द्वारा दिया गया उदाहरण "नियम" के सुरक्षित पक्ष में होने के लिए एक अतिरिक्त मील जाता प्रतीत होता है, इसलिए दोपहर को प्रोग्रामर को भविष्य में दोष दे सकता है, लेकिन यह सुरक्षा पठनीयता और अर्थ की कीमत पर हासिल की जाती है। यह सिर्फ यह है कि यह किसी अन्य व्यावहारिक डेवलपर को कैसे दिखाई देता है, लेकिन मुझे यकीन है कि आपका मतलब यह नहीं था।

— मेनोल

Answer 4

यह एक पुराना प्रश्न है, लेकिन कोई भी उत्तर अनुरोध को पूर्णता से संतुष्ट नहीं करता है। इसलिए मैं एक और उत्तर जोड़ रहा हूं।

अनुरोधित कोड, जैसा कि मैं समझता हूं, सामान्य हाइपरलिंक के काम करने के तरीके में केवल एक बदलाव POSTकरना चाहिए : विधि का उपयोग इसके बजाय किया जाना चाहिए GET। तत्काल प्रभाव होगा:

1. जब लिंक पर क्लिक किया जाता है तो हमें टैब को url के लिए पुनः लोड करना चाहिए href
2. जैसा कि विधि POST है, हमारे द्वारा लोड किए गए लक्ष्य पृष्ठ के URL में कोई क्वेरी स्ट्रिंग नहीं होनी चाहिए
3. उस पृष्ठ को पैरामीटर (नाम और मान) में डेटा प्राप्त करना चाहिए POST

मैं यहां jquery का उपयोग कर रहा हूं, लेकिन यह देशी एपिस (कठिन और लंबे समय तक) के साथ किया जा सकता है।

<html>
<head>
    <script src="path/to/jquery.min.js" type="text/javascript"></script>
    <script>
        $(document).ready(function() {

            $("a.post").click(function(e) {
                e.stopPropagation();
                e.preventDefault();
                var href = this.href;
                var parts = href.split('?');
                var url = parts[0];
                var params = parts[1].split('&');
                var pp, inputs = '';
                for(var i = 0, n = params.length; i < n; i++) {
                    pp = params[i].split('=');
                    inputs += '<input type="hidden" name="' + pp[0] + '" value="' + pp[1] + '" />';
                }
                $("body").append('<form action="'+url+'" method="post" id="poster">'+inputs+'</form>');
                $("#poster").submit();
            });
        });
    </script>
</head>
<body>
    <a class="post" href="reflector.php?color=blue&weight=340&model=x-12&price=14.800">Post it!</a><br/>
    <a href="reflector.php?color=blue&weight=340&model=x-12&price=14.800">Normal link</a>
</body>
</html>

और परिणाम देखने के लिए, परावर्तक के रूप में निम्न को सहेजें। उसी निर्देशिका में जो आपने ऊपर सहेजी है।

<h2>Get</h2>
<pre>
<?php print_r($_GET); ?>
</pre>

<h2>Post</h2>
<pre>
<?php print_r($_POST); ?>
</pre>

Answer 5

एक और काम करने वाला उदाहरण, इसी तरह के दृष्टिकोण का उपयोग करके: एक HTML फॉर्म बनाएं, पोस्ट का अनुकरण करने के लिए जावास्क्रिप्ट का उपयोग करें। यह 2 चीजें करता है: एक नए पृष्ठ पर डेटा पोस्ट करें और इसे एक नई विंडो / टैब में खोलें।

एचटीएमएल

<form name='myForm' target="_blank" action='newpage.html' method='post'>
<input type="hidden" name="thisIsTheParameterName" value="testDataToBePosted"/>
</form>

जावास्क्रिप्ट

document.forms["myForm"].submit();

Answer 6

HTML + JQuery : एक लिंक जो POST के साथ एक छिपे हुए फॉर्म को जमा करता है।

चूंकि मैंने इन सभी उत्तरों को समझने के लिए बहुत समय बिताया है, और चूंकि इन सभी में कुछ दिलचस्प विवरण हैं, यहां संयुक्त संस्करण है जो आखिरकार मेरे लिए काम करता है और जिसे मैं इसकी सादगी के लिए पसंद करता हूं।

मेरा दृष्टिकोण फिर से एक छिपा हुआ रूप बनाने और पृष्ठ में कहीं और लिंक पर क्लिक करके प्रस्तुत करने के लिए है। इससे कोई फर्क नहीं पड़ता कि पेज के मुख्य भाग में फॉर्म कहाँ रखा जाएगा।

फॉर्म के लिए कोड:

<form id="myHiddenFormId" action="myAction.php" method="post" style="display: none">
  <input type="hidden" name="myParameterName" value="myParameterValue">
</form>

विवरण:

रूप को display: noneछिपाता है। आप इसे वैकल्पिक रूप से एक div या किसी अन्य तत्व में डाल सकते हैं और तत्व को सेट कर सकते हैं display: none।

type="hidden"एक fild कि नहीं दिखाया जाएगा पैदा करेगा लेकिन इसकी डेटा कार्रवाई eitherways (करने के लिए प्रसारित किया जाएगा W3C देख )। मैं समझता हूं कि यह सबसे सरल इनपुट प्रकार है।

लिंक के लिए कोड:

<a href="" onclick="$('#myHiddenFormId').submit(); return false;" title="My link title">My link text</a>

विवरण:

खाली hrefबस एक ही पृष्ठ को लक्षित करता है । लेकिन यह इस मामले में वास्तव में मायने नहीं रखता है क्योंकि return falseलिंक के अनुसरण से ब्राउज़र को रोक देगा। आप इस व्यवहार को बदलना चाह सकते हैं। मेरे विशिष्ट मामले में, कार्रवाई में अंत में पुनर्निर्देशन शामिल था।

onclickका उपयोग कर से बचने के लिए इस्तेमाल किया गया था href="javascript:..."के रूप में mplungjan द्वारा नोट । $('#myHiddenFormId').submit();(बजाय एक समारोह को परिभाषित करने की, के बाद से कोड बहुत छोटा है) प्रपत्र प्रस्तुत करने के लिए इस्तेमाल किया गया था।

यह लिंक बिल्कुल किसी अन्य <a>तत्व की तरह दिखेगा । आप वास्तव में इसके बजाय किसी अन्य तत्व का उपयोग कर सकते हैं <a>(उदाहरण के लिए एक <span>या एक छवि)।

Answer 7

आप इस jQuery फ़ंक्शन का उपयोग कर सकते हैं

function makePostRequest(url, data) {
    var jForm = $('<form></form>');
    jForm.attr('action', url);
    jForm.attr('method', 'post');
    for (name in data) {
        var jInput = $("<input>");
        jInput.attr('name', name);
        jInput.attr('value', data[name]);
        jForm.append(jInput);
    }
    jForm.submit();
}

यहाँ एक उदाहरण है jsFiddle ( http://jsfiddle.net/S7zUm/ )

Comments

@DaoLam कोड वास्तव में काम करता है। मैंने phpref में मान के लिए घायल हुए।

— JSWilson

Answer 8

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

<script type="text/javascript" language="javascript">
function post_link(data){

    $('#post_form').find('#form_input').val(data);
    $('#post_form').submit();
};
</script>

   <form id="post_form" action="anywhere/you/want/" method="POST">
 {% csrf_token %}
    <input id="form_input" type="hidden" value="" name="form_input">
</form>

<a href="javascript:{}" onclick="javascript:post_link('data');">post link is ready</a>

Answer 9

मैं एक और अधिक गतिशील दृष्टिकोण का सुझाव देता हूं, पृष्ठ में HTML कोडिंग के बिना, इसे सख्ती से जेएस रखें:

$("a.AS-POST").on('click', e => {
  e.preventDefault()
  let frm = document.createElement('FORM')
  frm.id='frm_'+Math.random()
  frm.method='POST'
  frm.action=e.target.href
  document.body.appendChild(frm)
  frm.submit()
})

Answer 10

जावास्क्रिप्ट का उपयोग करने के बजाय, आप एक छिपे हुए फ़ॉर्म को भेजने वाले लेबल का भी उपयोग कर सकते हैं। बहुत ही सरल और छोटा सा उपाय। लेबल आपके html में कहीं भी हो सकता है।

<form style="display: none" action="postUrl" method="post">
  <button type="submit" id="button_to_link"> </button>
</form>
<label style="text-decoration: underline" for="button_to_link">  link that posts </label>

Answer 11

इसकी जाँच करें यह आपकी मदद करेगा

$().redirect('test.php', {'a': 'value1', 'b': 'value2'});

Comments

आपको यह उल्लेख करना चाहिए कि इस समाधान के लिए निम्न पुस्तकालय की आवश्यकता है: github.com/mgalante/jquery.redirect

— Felix G.