GET yerine POST'u kullanarak bağlantı oluşturma

206

Bunun mümkün olup olmadığından emin değilim. Ama ben bir köprü bazı değişkenler geçmek ve GET yerine POST (bir form gibi) nasıl kullanılacağını bilmek merak ediyordum.

javascript  html  http 
— Elliot
kaynak
HTML bunu yapamaz. JavaScript, bağlantıdaki tıklama etkinliğini yakalayabilir ve HTML'yi değiştiremezseniz istediğinizi yapabilir ve CSS, yalnızca görünüm meselesi varsa bağlantılar gibi düğmeyi stilize edebilir.
— sylvain

Yanıtlar:

98

Sen değerleri ayarlamak, asılacak tutun gizli girişler ile bir form oluşturmak eylemi hedef url formun ve form yöntemini yazı . Ardından bağlantınız tıklatıldığında formu gönderen bir JS işlevi tetiklenir.

Bir örnek için buraya bakın . Bu örnek, jQuery olmadan saf JavaScript kullanıyor - zaten sahip olduğunuzdan daha fazla bir şey yüklemek istemiyorsanız bunu seçebilirsiniz.

<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>
— Palantir
kaynak
17
Bu neden kabul edilen cevap? Soru özellikle GET'in aksine POST (bir form gibi) kullanılmasını ister , ancak bu cevap " hedef URL'ye eylemi ayarlayın ve alma yöntemi " diyor.
— Majid Fouladpour
3
Anladım. Anlamadığım şey şudur: POST yapabilmemiz için gizli bir form oluşturma sorununa giriyoruz, ancak daha sonra form oluşturulduktan sonra yöntemi neden ayarlamayı öneriyorsunuz GET? getForm olmadan vardı , değil mi?
— Majid Fouladpour
3
Haklısın. Bu bir hataydı, ancak bir şekilde OP hala doğru anladı (muhtemelen daha net olan dahil bağlantı nedeniyle). İşaret ettiğiniz için teşekkürler. Bunu tamamen yeniden ifade ettim.
— Palantir
3
Daha modern bir yaklaşım kullanmak için cevabınızı güncelledim. Kabul etmiyorsanız, bu düzenlemeyi geri almaktan çekinmeyin.
— Michał Perłakowski
3
Javascript'i bu sürece dahil etmek için hiçbir neden yoktur. Bu neden kabul edilen cevap?
— shacker
326

Bunun için JavaScript'e ihtiyacınız yok. Sadece bunu açıklığa kavuşturmak istedim, bu cevabın yayınlandığı tarihten itibaren, bu sorunun tüm cevapları JavaScript'in bir şekilde kullanılmasını içeriyor.

Göndermek istediğiniz verileri içeren gizli alanlara sahip bir form oluşturarak ve ardından formun gönderme düğmesini bir bağlantı gibi görünecek şekilde şekillendirerek bunu saf HTML ve CSS ile kolayca yapabilirsiniz .

Örneğin:

.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>
Snippet'i genişlet

Kullandığınız tam CSS, sitenizdeki normal bağlantıların tarzına bağlı olarak değişebilir.

— Ajedi32
kaynak
4
kabul. Bir e-posta bunu yapmak için bir yol gerekiyordu, bu yüzden JS benim için bir seçenek değildi. Bu mükemmel bir şekilde çalışmalıdır
— SynackSA
9
Bunu sadece bir kez yükseltebilirim. Bu, tüm HTML sorularının% 99.728'inin Javascript veya jQuery sorunları ile karıştırılması kadar üzücü.
— Rab
3
Bu kesinlikle bir bağlantıya benzeyen bir düğmeyi kullanmanın basit bir yoludur, ancak aslında zor kodlamadır. Bu düğmenin yaşayacağı koşulları tam olarak bilmeniz ve her durum için bunları açıkça ayarlamanız gerekir. Ben JS / JQuery dayalı cevaplar bağlantı öğesi kendisini (veya hangi öğe) kullandığından daha genel olduğunu düşünüyorum.
— MakisH
2
@ Ajedi32 Üzgünüm, yorumum çok net değildi: Temelde bu düğmenin özellikle <a> öğesi gibi görünecek şekilde tasarlandığını söylemeye çalışıyorum. Ancak düğmeyi, örneğin sayfanın farklı bölümlerinde farklı şekilde biçimlendirilmiş diğer <a> öğelerin etrafına koyarsanız, gezinme, ziyaret edilen vb. İçin kurallar oluşturmak için <a> düğmenin de <a> tüm css kurallarını kopyalamanız gerekir. Aksi takdirde işi elbette yapacak, ama çirkin görünecek. Herhangi bir CSS'yi değiştirmeniz gerekmeyen diğer çözümlerle, sahip olduğunuz diğer tüm ürünler gibi bir <a> öğesi elde edersiniz. Elbette saf HTML'nin de bazı avantajları vardır.
— MakisH
1
@Robert AFAIK, önerilen diğer çözümlerin hiçbiri orta tıklama ile çalışmaz. Eğer varsa gerçekten bilgiçlik olmak istiyorum, bir link ile POST isteği göndererek imkansız olduğunu söyleyebiliriz. Yalnızca form ve JavaScript içeren POST istekleri gönderebilirsiniz.
— Ajedi32
48

Javascript işlevlerini kullanabilirsiniz. JQuery, kullanmaya karar verirseniz yerleşik güzel bir yazı işlevine sahiptir:

JQuery Post

<script language="javascript"> 

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

</script>



<a href="javascript:DoPost()">Click Here</A>
— AGoodDisplayName
kaynak
5
Bu POST isteği istendiği gibi yapar, ama yine de "Whatever.php" konumuna gitmek gerekir çünkü bunu kullanamadı.
— Chris
6
$.post('page.php', {param: 1}, function() { window.location.href = 'page'.php' });
— JREAM
1
@mplungjan href Bu davanın javascript o şaşırtmak davranış ve içeriğin yanlış olduğunu kabul ederken bağlantı atıfta nerede diyor olduğunu referansı. Başka bir deyişle "bağlantıyı tıkladığınızda JavaScript kullanarak bir geri gönderme gerçekleştirilecektir". Bunun, bir tıklama etkinliğini bağlamaktan daha fazla anlamı vardır. "Hiç href içinde javascript kullanma" gibi zor kurallar diğer kötü uygulamalar kadar kötüdür.
— Menol
@Menol dedim: önerilmez. - "hiç kullanma" değil. Gerçekten yapmak <a href="whyjavascript.html" id="postIt">Click Here</a>ve yapmak istiyorsanız$("#postIt").on("click",function(e) { e.preventDefault(); $.post("WhateverPage.php", { name: "John", time: "2pm" } ); });
— mplungjan
1
@mplungjan içeriği / davranışı karıştırmamak için başka herhangi bir öneri getirildi. Amaçlanan kapsamın dışındaki durumlarda bir öneri getirildiğinde, zor bir kural olarak görünmeye başlar. Verdiğiniz örnek, sadece "kuralın" güvenli tarafında olmak için fazladan bir yol kat ediyor gibi görünüyor, böylece kimse programcıyı gelecekte suçlayamaz, ancak bu güvenlik , okunabilirlik ve anlam pahasına elde edilir. Başka bir pragmatik geliştiriciye böyle görünüyor, ama eminim bunu kastetmediniz.
— Menol
24

Bu eski bir soru, ancak cevapların hiçbiri isteği tam olarak karşılamıyor. Bu yüzden başka bir cevap ekliyorum.

İstediğim kod, anladığım kadarıyla, normal köprülerin çalışma biçiminde yalnızca bir değişiklik POSTyapmalıdır : yöntem yerine kullanılmalıdır GET. Anında çıkarımlar:

  1. Bağlantı tıklandığında sekmeyi sitenin URL'sine yeniden yüklemeliyiz href
  2. Yöntem POST olduğundan, yüklediğimiz hedef sayfanın URL'sinde sorgu dizesi olmamalıdır
  3. Bu sayfa tarafından parametrelerdeki (adlar ve değer) verileri POST

Burada jquery kullanıyorum, ama bu yerli apis (daha zor ve daha uzun tabii ki) ile yapılabilir.

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

Ve sonucu görmek için, aşağıdakileri kaydettiğiniz dizine reflector.php olarak kaydedin.

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

<h2>Post</h2>
<pre>
<?php print_r($_POST); ?>
</pre>
— Majid Fouladpour
kaynak
12

Yayınlanan benzer yaklaşımı kullanarak başka bir çalışma örneği: bir html formu oluşturun, yayını simüle etmek için javascript kullanın. Bu 2 şey yapar: verileri yeni bir sayfaya gönderin ve yeni bir pencerede / sekmede açın.

HTML

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

JavaScript

document.forms["myForm"].submit();
— Quannt
kaynak
3

HTML + JQuery : POST ile gizli bir form gönderen bir bağlantı.

Tüm bu cevapları anlamak için çok zaman harcadığım ve hepsinin bazı ilginç detayları olduğu için, sonunda benim için çalışan ve basitliği için tercih ettiğim kombine versiyon.

Benim yaklaşımım yine gizli bir form oluşturmak ve sayfanın başka bir yerinde bir bağlantıyı tıklatarak göndermek. Formun sayfanın gövdesine nereye yerleştirileceği önemli değildir.

Formun kodu:

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

Açıklama:

display: noneFormu gizler. Alternatif olarak bir div veya başka bir öğeye koyabilir display: noneve öğenin üzerine ayarlayabilirsiniz .

type="hidden"Gösterilmeyecek bir fild yaratacaktır ama veri işlem eitherways (iletilir W3C bakınız ). Bunun en basit girdi türü olduğunu anlıyorum.

Bağlantının kodu:

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

Açıklama:

Boş hrefsadece aynı sayfayı hedefleyen . Ancak bu durumda gerçekten önemli değil çünkü return falsetarayıcı bağlantıyı takip etmeyi durduracak. Elbette bu davranışı değiştirmek isteyebilirsiniz. Benim özel durumumda, eylem sonunda bir yönlendirme içeriyordu.

onclickKullanmaktan kaçınmak için kullanılmıştır href="javascript:..."olarak mplungjan tarafından belirtildiği . $('#myHiddenFormId').submit();(Kod çok küçük olduğu için, bunun yerine bir işlev tanımlama) formu göndermek için kullanıldı.

Bu bağlantı tam olarak diğer herhangi bir <a>öğeye benzeyecektir . Aslında <a>(örneğin a <span>veya resim) yerine başka bir öğe kullanabilirsiniz .

— MakisH
kaynak
2

Bu jQuery işlevini kullanabilirsiniz

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();
}

Aşağıda jsFiddle'daki bir örnek ( http://jsfiddle.net/S7zUm/ )

— DarkThanos
kaynak
@DaoLam kodu gerçekten işe yarıyor. Ben phpref değeri leserged.free.fr/phpinfo.php yerine ve bu değerleri geçen sitede formu gönderdi.
— JSWilson
2

Birçok gönderide belirtildiği gibi, bu doğrudan mümkün değildir, ancak kolay ve başarılı bir yol şu şekildedir: İlk olarak, html sayfamızın gövdesine, gönderme için herhangi bir düğmenin bulunmadığı bir form koyduk. Gizlenmiş. Sonra verileri almak ve formu göndermek için bir javascript işlevi kullanırız. Bu yöntemin avantajlarından biri, sunucu tarafı koduna bağlı olan diğer sayfalara yönlendirmektir. Kod aşağıdaki gibidir: ve şimdi her yerde bir "POST" yönteminde olması gerekir:

<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>
— Mehdi Firouzjah
kaynak
1

Ben html kodlama sayfaya olmadan, daha dinamik bir yaklaşım öneririz, kesinlikle JS tutun:

$("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()
})
— Nemrut
kaynak
0

Javascript kullanmak yerine, gizli bir form gönderen bir etiket de kullanabilirsiniz. Çok basit ve küçük bir çözüm. Etiket, HTML'nizin herhangi bir yerinde olabilir.

<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>
Snippet'i genişlet

— Gladhon
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.