Buat tautan menggunakan POST bukan GET

205

Saya tidak yakin apakah ini mungkin. Tapi saya bertanya-tanya apakah ada yang tahu cara membuat hyperlink melewati beberapa variabel dan menggunakan POST (seperti formulir) sebagai lawan GET.

javascript html http Elliot
sumber
HTML tidak bisa melakukan itu. JavaScript dapat menangkap peristiwa klik pada tautan dan melakukan apa yang Anda inginkan jika Anda tidak dapat mengubah tombol gaya HTML dan CSS seperti tautan jika itu hanya masalah penampilan.
sylvain

Jawaban:

99

Anda membuat formulir dengan input tersembunyi yang menahan nilai yang akan diposting, atur tindakan formulir ke url tujuan, dan metode formulir untuk memposting . Kemudian, ketika tautan Anda diklik, memicu fungsi JS yang mengirimkan formulir.

Lihat di sini , misalnya. Contoh ini menggunakan JavaScript murni, tanpa jQuery - Anda dapat memilih ini jika Anda tidak ingin menginstal apa pun lebih dari yang sudah Anda miliki.

<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
sumber
16
Mengapa ini jawaban yang diterima? Pertanyaannya secara khusus meminta penggunaan POST (seperti formulir) sebagai lawan GET , namun jawaban ini mengatakan " setel tindakan ke url tujuan dan metode untuk mendapatkan ".
Majid Fouladpour
3
Saya mengerti. Yang tidak saya mengerti adalah ini: kita masuk ke masalah membuat formulir tersembunyi sehingga kita bisa POST, tapi kemudian, setelah formulir dibuat, mengapa Anda mengusulkan untuk mengatur metode GET? Kami punya gettanpa formulir, bukan?
Majid Fouladpour
3
Kamu benar. Itu kesalahan, tapi entah bagaimana OP masih melakukannya dengan benar (mungkin karena tautan yang disertakan jauh lebih jelas). Terima kasih telah menunjukkan. Saya ulangi itu sepenuhnya.
Palantir
3
Saya memperbarui jawaban Anda untuk menggunakan pendekatan yang lebih modern. Jika Anda tidak setuju, silakan kembalikan suntingan ini.
Michał Perłakowski
3
Tidak ada alasan untuk melibatkan Javascript dalam proses ini. Mengapa ini jawaban yang diterima?
Shacker
323

Anda tidak perlu JavaScript untuk ini. Hanya ingin memperjelas, karena pada saat jawaban ini diposting, semua jawaban untuk pertanyaan ini melibatkan penggunaan JavaScript dalam beberapa cara.

Anda dapat melakukan ini dengan cukup mudah dengan HTML dan CSS murni dengan membuat formulir dengan bidang tersembunyi yang berisi data yang ingin Anda kirim, lalu menata tombol kirim dari formulir agar terlihat seperti tautan.

Sebagai contoh:

.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>
Luaskan cuplikan

CSS persis yang Anda gunakan dapat bervariasi tergantung pada bagaimana tautan reguler di situs Anda ditata.

Ajedi32
sumber
4
sepakat. Saya membutuhkan cara untuk melakukan ini dalam email, jadi JS tidak banyak pilihan bagi saya. Ini seharusnya bekerja dengan baik
SynackSA
8
Saya hanya bisa mengungguli ini sekali. Itu hampir sama menyedihkannya dengan kenyataan bahwa 99,728% dari semua pertanyaan HTML akan berakhir menjadi bingung dengan masalah Javascript atau jQuery.
Rab
3
Ini pastinya cara mudah untuk menggunakan tombol yang terlihat seperti tautan, tetapi sebenarnya ini adalah hard-coding. Anda harus tahu persis kondisi di mana tombol ini akan hidup dan mengaturnya secara eksplisit untuk setiap kasus. Saya pikir jawaban yang didasarkan pada JS / JQuery lebih umum karena mereka menggunakan elemen tautan itu sendiri (atau elemen mana saja).
MakisH
2
@ Ajedi32 Maaf, komentar saya tidak begitu jelas: Saya terutama mencoba mengatakan bahwa tombol ini dirancang khusus agar terlihat seperti elemen <a>. Tetapi jika Anda menempatkan tombol di sekitar elemen <a> lainnya yang ditata berbeda misalnya di bagian halaman yang berbeda Anda harus menduplikasi semua aturan css dari <a> juga untuk tombol, untuk membuat aturan untuk melayang, mengunjungi dll. Kalau tidak, tentu saja akan melakukan pekerjaan, tetapi itu akan terlihat jelek. Dengan solusi lain yang Anda tidak perlu mengubah CSS apa pun, Anda hanya mendapatkan elemen <a> seperti yang lain yang sudah Anda miliki. Tentu saja HTML murni juga memiliki beberapa kelebihan.
MakisH
1
@Robert AFAIK, tidak ada solusi lain yang disarankan yang berfungsi dengan klik tengah juga. Jika Anda benar - benar ingin bertele-tele, Anda mungkin mengatakan bahwa mengirimkan permintaan POST dengan tautan tidak mungkin. Anda hanya dapat mengirim permintaan POST dengan formulir dan JavaScript.
Ajedi32
48

Anda dapat menggunakan fungsi javascript. JQuery memiliki fungsi posting yang bagus jika Anda memutuskan untuk menggunakannya:

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
sumber
5
Ini memang membuat permintaan POST seperti yang diminta, tetapi saya tidak bisa menggunakan ini karena saya masih perlu pergi ke lokasi "Whatever.php".
Chris
6
$.post('page.php', {param: 1}, function() { window.location.href = 'page'.php' });
JREAM
1
@ mplungjan href mengatakan di mana tautan merujuk, sementara saya setuju bahwa itu salah untuk membingungkan perilaku dan konten, dalam hal ini javascript adalah rujukan. Dengan kata lain "ketika Anda mengklik tautan itu akan melakukan postback menggunakan JavaScript". Ini memiliki lebih banyak makna daripada mengikat acara klik. Aturan keras seperti "jangan pernah menggunakan javascript di href" sama buruknya dengan praktik buruk lainnya.
Menol
@ Jenol saya katakan: tidak direkomendasikan. - tidak "jangan pernah gunakan". Jika Anda benar-benar ingin Anda dapat melakukannya <a href="whyjavascript.html" id="postIt">Click Here</a>dan memiliki$("#postIt").on("click",function(e) { e.preventDefault(); $.post("WhateverPage.php", { name: "John", time: "2pm" } ); });
mplungjan
1
@mplungjan bahwa rekomendasi seperti yang lain diperkenalkan untuk menghindari konten / perilaku yang membingungkan. Ketika sebuah rekomendasi diajukan dalam kasus-kasus di luar cakupan yang dimaksudkan, ia mulai muncul sebagai aturan yang keras. Contoh yang Anda berikan tampaknya bekerja lebih keras hanya untuk berada di sisi aman dari "aturan" sehingga tidak ada yang bisa menyalahkan programmer di masa depan tetapi keamanan ini dicapai dengan biaya keterbacaan dan makna. Hanya saja tampilannya bagi pengembang pragmatis lain, tetapi saya yakin Anda tidak bermaksud demikian.
Menol
24

Ini adalah pertanyaan lama, tetapi tidak ada jawaban yang memuaskan permintaan secara penuh. Jadi saya menambahkan jawaban lain.

Kode yang diminta, seperti yang saya pahami, seharusnya hanya membuat satu perubahan pada cara kerja hyperlink normal: POSTmetode yang seharusnya digunakan GET. Implikasi langsungnya adalah:

  1. Ketika tautan diklik, kita harus memuat kembali tab ke url dari href
  2. Karena metode ini POST, kita tidak boleh memiliki string kueri di URL halaman target yang kita muat
  3. Halaman itu harus menerima data dalam parameter (nama dan nilai) oleh POST

Saya menggunakan jquery di sini, tetapi ini bisa dilakukan dengan apis asli (tentu saja lebih sulit dan lebih lama).

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

Dan untuk melihat hasilnya, simpan yang berikut ini sebagai reflector.php di direktori yang sama dengan yang Anda simpan di atas.

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

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

Contoh kerja lain, menggunakan pendekatan serupa yang diposting: buat formulir html, gunakan javascript untuk mensimulasikan posting. Ini melakukan 2 hal: memposting data ke halaman baru dan membukanya di jendela / tab baru.

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

HTML + JQuery : Tautan yang mengirimkan formulir tersembunyi dengan POST.

Karena saya menghabiskan banyak waktu untuk memahami semua jawaban ini, dan karena semuanya memiliki detail yang menarik, inilah versi gabungan yang akhirnya bekerja untuk saya dan yang saya sukai karena kesederhanaannya.

Pendekatan saya lagi adalah untuk membuat formulir tersembunyi dan mengirimkannya dengan mengklik tautan di tempat lain di halaman. Tidak masalah di mana di tubuh halaman formulir akan ditempatkan.

Kode untuk formulir:

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

Deskripsi:

The display: nonemenyembunyikan formulir. Anda dapat menaruhnya di div atau elemen lain dan mengaturnya display: nonepada elemen.

The type="hidden"akan menciptakan fild yang tidak akan ditampilkan tetapi datanya akan dikirim ke eitherways tindakan ( lihat W3C ). Saya mengerti bahwa ini adalah tipe input yang paling sederhana.

Kode untuk tautan:

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

Deskripsi:

Yang kosong hrefhanya menargetkan halaman yang sama . Tapi tidak masalah dalam hal ini karena return falsebrowser akan menghentikan mengikuti tautan. Anda mungkin ingin mengubah perilaku ini tentu saja. Dalam kasus khusus saya, tindakan tersebut berisi pengalihan di akhir.

Itu onclickdigunakan untuk menghindari penggunaan href="javascript:..."seperti yang dicatat oleh mplungjan . Itu $('#myHiddenFormId').submit();digunakan untuk mengirimkan formulir (alih-alih mendefinisikan fungsi, karena kodenya sangat kecil).

Tautan ini akan terlihat persis seperti <a>elemen lainnya . Anda benar-benar dapat menggunakan elemen lain alih-alih <a>(misalnya a <span>atau gambar).

MEMBUAT
sumber
2

Anda dapat menggunakan fungsi jQuery ini

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

Berikut adalah contoh di jsFiddle ( http://jsfiddle.net/S7zUm/ )

DarkThanos
sumber
@ QingdaoLam kodenya benar-benar berfungsi. Saya mengganti leserged.free.fr/phpinfo.php dengan nilai di phpref dan mengirimkan formulir ke situs yang meneruskan nilainya.
JSWilson
2

Seperti disebutkan dalam banyak posting, ini tidak mungkin secara langsung, tetapi cara yang mudah dan sukses adalah sebagai berikut: Pertama, kami meletakkan formulir di badan halaman html kami, yang tidak memiliki tombol untuk mengirim, dan juga masukannya disembunyikan. Kemudian kami menggunakan fungsi javascript untuk mendapatkan data dan, mengirim formulir. Salah satu keuntungan dari metode ini adalah untuk mengarahkan ulang ke halaman lain, yang tergantung pada kode sisi server. Kode tersebut adalah sebagai berikut: dan sekarang di mana saja Anda memerlukan metode "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>
Mahdi Firouzjah
sumber
1

Saya menyarankan pendekatan yang lebih dinamis, tanpa coding html ke dalam halaman, pertahankan dengan ketat JS:

$("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()
})
Nimrod
sumber
0

Alih-alih menggunakan javascript, Anda juga bisa menggunakan label yang mengirimkan formulir tersembunyi. Solusi yang sangat sederhana dan kecil. Label bisa di mana saja di html Anda.

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

Gladhon
sumber
-1

Periksa ini akan membantu Anda 

$().redirect('test.php', {'a': 'value1', 'b': 'value2'});
Shoaib Quraishi
sumber
2
Anda harus menyebutkan bahwa solusi ini memerlukan pustaka berikut: github.com/mgalante/jquery.redirect
Felix G.