Tạo liên kết sử dụng POST thay vì GET

204

Tôi không chắc nếu điều này thậm chí có thể. Nhưng tôi đã tự hỏi nếu có ai biết làm thế nào để tạo một siêu liên kết vượt qua một số biến và sử dụng POST (như một hình thức) trái ngược với GET.

javascript html http

— Elliot
nguồn

HTML không thể làm điều đó. JavaScript có thể bắt sự kiện nhấp chuột vào liên kết và làm những gì bạn muốn nếu bạn không thể thay đổi HTML và CSS có thể tạo kiểu nút như liên kết nếu đó chỉ là vấn đề về ngoại hình.

— sylvain

98

Bạn tạo một biểu mẫu với các đầu vào ẩn giữ các giá trị sẽ được đăng, đặt hành động của biểu mẫu thành url đích và phương thức biểu mẫu để đăng . Sau đó, khi liên kết của bạn được nhấp, hãy kích hoạt một hàm JS gửi biểu mẫu.

Xem ở đây , ví dụ. Ví dụ này sử dụng JavaScript thuần túy, không có jQuery - bạn có thể chọn điều này nếu bạn không muốn cài đặt bất cứ thứ gì nhiều hơn bạn đã có.

<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
nguồn

16

Tại sao đây là câu trả lời được chấp nhận? Câu hỏi đặc biệt yêu cầu sử dụng POST (như một biểu mẫu) trái ngược với GET , tuy nhiên câu trả lời này cho biết " đặt hành động cho url đích và phương thức để nhận ".

— Majid fouadpour

3

Tôi hiểu rồi Điều tôi không hiểu là đây: chúng ta gặp rắc rối khi tạo một biểu mẫu ẩn để chúng ta có thể POST, nhưng sau đó, sau khi biểu mẫu được tạo, tại sao bạn đề xuất đặt phương thức thành GET? Chúng tôi đã có getmà không có hình thức, phải không?

— Majid fouadpour

3

Bạn đúng rồi. Đó là một lỗi, nhưng bằng cách nào đó OP vẫn hiểu đúng (có thể là do liên kết đi kèm rõ ràng hơn nhiều). Cảm ơn đã chỉ ra. Tôi hoàn toàn đọc lại điều đó.

— Palantir

3

Tôi cập nhật câu trả lời của bạn để sử dụng phương pháp hiện đại hơn. Nếu bạn không đồng ý, vui lòng quay lại chỉnh sửa này.

— Michał Perłakowski

3

Không có lý do để liên quan đến Javascript trong quá trình này. Tại sao đây là câu trả lời được chấp nhận?

— Shacker

322

Bạn không cần JavaScript cho việc này. Chỉ muốn làm rõ điều đó, kể từ thời điểm câu trả lời này được đăng, tất cả các câu trả lời cho câu hỏi này liên quan đến việc sử dụng JavaScript theo cách này hay cách khác.

Bạn có thể thực hiện việc này khá dễ dàng với HTML và CSS thuần bằng cách tạo một biểu mẫu với các trường ẩn chứa dữ liệu bạn muốn gửi, sau đó tạo kiểu nút gửi của biểu mẫu để trông giống như một liên kết.

Ví dụ:

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

Mở rộng đoạn trích

CSS chính xác mà bạn sử dụng có thể khác nhau tùy thuộc vào cách liên kết thường xuyên trên trang web của bạn được tạo kiểu.

— Ajedi32
nguồn

4

đã đồng ý. Tôi cần một cách để làm điều này trong một email, vì vậy, JS không phải là một lựa chọn cho tôi. Điều này sẽ hoạt động hoàn hảo

— SynackSA

7

Tôi chỉ có thể nâng cấp điều này một lần. Điều đó gần như đáng buồn vì thực tế là 99,728% tất cả các câu hỏi HTML sẽ bị nhầm lẫn với các vấn đề Javascript hoặc jQuery.

— Rab

3

Đây chắc chắn là một cách đơn giản để sử dụng một nút trông giống như một liên kết, nhưng nó thực sự khó mã hóa. Bạn phải biết chính xác các điều kiện mà nút này sẽ tồn tại và thiết lập chúng rõ ràng cho mọi trường hợp. Tôi nghĩ rằng các câu trả lời dựa trên JS / JQuery là chung chung hơn vì chúng đang sử dụng chính phần tử liên kết (hoặc phần tử nào).

— MakisH

2

@ Ajedi32 Xin lỗi, nhận xét của tôi không quá rõ ràng: Tôi chủ yếu cố gắng nói rằng nút này được tạo kiểu đặc biệt để trông giống như một yếu tố <a>. Nhưng nếu bạn đặt nút xung quanh các phần tử <a> khác được tạo kiểu khác nhau, ví dụ như ở các phần khác nhau của trang, bạn phải sao chép tất cả các quy tắc css của <a> cũng cho nút, để tạo quy tắc cho di chuột, truy cập, v.v. Nếu không nó tất nhiên sẽ làm công việc, nhưng nó sẽ trông xấu xí. Với các giải pháp khác mà bạn không cần thay đổi bất kỳ CSS nào, bạn chỉ cần có một phần tử <a> giống như tất cả các giải pháp khác mà bạn đã có. Tất nhiên HTML thuần túy cũng có một số lợi thế.

— MakisH

1

@Robert AFAIK, không có giải pháp đề xuất nào khác hoạt động với nhấp chuột giữa. Nếu bạn thực sự muốn trở thành nhà mô phạm, bạn có thể nói rằng việc gửi yêu cầu POST với một liên kết là không thể. Bạn chỉ có thể gửi yêu cầu POST với các biểu mẫu và JavaScript.

— Ajedi32

48

Bạn có thể sử dụng các chức năng javascript. JQuery có một chức năng bài đăng đẹp được tích hợp nếu bạn quyết định sử dụng nó:

Bài viết của JQuery

<script language="javascript"> 

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

</script>

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

— Tên AGoodDisplay
nguồn

5

Điều này không thực hiện yêu cầu POST như được yêu cầu, nhưng tôi không thể sử dụng điều này bởi vì tôi vẫn cần phải đi đến vị trí "Any.php".

— Chris

6

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

— JREAM

1

@mplungjan href nói nơi liên kết được đề cập đến, trong khi tôi đồng ý rằng việc nhầm lẫn giữa hành vi và nội dung là sai, trong trường hợp này javascript là tài liệu tham khảo. Nói cách khác "khi bạn nhấp vào liên kết, nó sẽ thực hiện việc gửi lại bằng JavaScript". Điều này có ý nghĩa nhiều hơn là ràng buộc một sự kiện nhấp chuột. Các quy tắc cứng như "không bao giờ sử dụng javascript in href" cũng tệ như bất kỳ thực tiễn xấu nào khác.

— Menol

@Menol Tôi nói: không nên. - không "không bao giờ sử dụng". Nếu bạn thực sự muốn, bạn có thể làm <a href="whyjavascript.html" id="postIt">Click Here</a>và có

$("#postIt").on("click",function(e) { e.preventDefault(); $.post("WhateverPage.php", { name: "John", time: "2pm" } ); });

— mplungjan

1

@mplungjan khuyến nghị như bất kỳ đề xuất nào khác được giới thiệu để tránh nội dung / hành vi khó hiểu. Khi một khuyến nghị được đưa ra trong các trường hợp nằm ngoài phạm vi dự định của nó, nó sẽ bắt đầu xuất hiện dưới dạng một quy tắc cứng. Ví dụ bạn đưa ra dường như đi thêm một dặm chỉ để đứng về phía an toàn của "quy tắc" để không ai có thể đổ lỗi cho lập trình viên trong tương lai nhưng sự an toàn này đạt được với chi phí dễ đọc và ý nghĩa. Đó chỉ là cách nó xuất hiện với một nhà phát triển thực dụng khác nhưng tôi chắc chắn rằng bạn không có ý đó.

— Menol

24

Đây là một câu hỏi cũ, nhưng không có câu trả lời nào thỏa mãn yêu cầu đầy đủ. Vì vậy, tôi đang thêm một câu trả lời.

Mã được yêu cầu, theo tôi hiểu, chỉ nên thực hiện một thay đổi đối với cách hoạt động của các siêu liên kết thông thường: POSTphương pháp nên được sử dụng thay vì GET. Ý nghĩa ngay lập tức sẽ là:

Khi liên kết được nhấp, chúng ta nên tải lại tab vào url của href
Vì phương thức là POST, chúng ta sẽ không có chuỗi truy vấn trong URL của trang đích mà chúng ta tải
Trang đó sẽ nhận dữ liệu theo tham số (tên và giá trị) theo POST

Tôi đang sử dụng jquery ở đây, nhưng điều này có thể được thực hiện với apis bản địa (tất nhiên khó hơn và lâu hơn).

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

Và để xem kết quả, hãy lưu phần sau dưới dạng Reflector.php trong cùng thư mục bạn đã lưu ở trên.

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

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

— Majid fouadpour
nguồn

12

Một ví dụ hoạt động khác, sử dụng cách tiếp cận tương tự được đăng: tạo một biểu mẫu html, sử dụng javascript để mô phỏng bài đăng. Điều này thực hiện 2 điều: đăng dữ liệu lên một trang mới và mở nó trong một cửa sổ / tab mới.

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
nguồn

3

HTML + JQuery : Một liên kết gửi biểu mẫu ẩn bằng POST.

Vì tôi đã dành rất nhiều thời gian để hiểu tất cả các câu trả lời này, và vì tất cả chúng đều có một số chi tiết thú vị, đây là phiên bản kết hợp cuối cùng phù hợp với tôi và tôi thích sự đơn giản của nó.

Cách tiếp cận của tôi là một lần nữa để tạo một biểu mẫu ẩn và gửi nó bằng cách nhấp vào một liên kết ở một nơi khác trong trang. Không quan trọng vị trí của trang sẽ được đặt ở đâu.

Mã cho mẫu:

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

Sự miêu tả:

Các display: noneẩn mẫu. Bạn có thể thay thế đặt nó trong div hoặc phần tử khác và đặt display: nonephần tử trên.

Ý type="hidden"chí sẽ tạo ra một fild sẽ không được hiển thị nhưng dữ liệu của nó sẽ được truyền đến các hành động ( xem W3C ). Tôi hiểu rằng đây là loại đầu vào đơn giản nhất.

Mã cho liên kết:

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

Sự miêu tả:

Các mục tiêu trống hrefchỉ cùng một trang . Nhưng nó không thực sự quan trọng trong trường hợp này vì return falsenó sẽ ngăn trình duyệt theo liên kết. Bạn có thể muốn thay đổi hành vi này tất nhiên. Trong trường hợp cụ thể của tôi, hành động chứa một chuyển hướng ở cuối.

Đã onclickđược sử dụng để tránh sử dụng href="javascript:..."như ghi chú của mplungjan . Các $('#myHiddenFormId').submit();đã được sử dụng để gửi biểu mẫu (thay vì định nghĩa một hàm, vì mã là rất nhỏ).

Liên kết này sẽ trông giống hệt như bất kỳ <a>yếu tố khác . Bạn thực sự có thể sử dụng bất kỳ yếu tố nào khác thay vì <a>(ví dụ a <span>hoặc hình ảnh).

— MakisH
nguồn

2

Bạn có thể sử dụng hàm jQuery này

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

Dưới đây là một ví dụ trong jsFiddle ( http://jsfiddle.net/S7zUm/ )

— DarkThanos
nguồn

@DaoLam mã thực sự hoạt động. Tôi đã thay thế leserged.free.fr/phpinfo.php cho giá trị trong phpref và nó đã đăng biểu mẫu lên trang web đó trong các giá trị.

— JSWilson

2

Như đã đề cập trong nhiều bài đăng, điều này không thể trực tiếp, nhưng một cách dễ dàng và thành công như sau: Đầu tiên, chúng tôi đặt một biểu mẫu trong phần thân của trang html của chúng tôi, không có bất kỳ nút nào để gửi và cả đầu vào của nó Đang ẩn. Sau đó, chúng tôi sử dụng chức năng javascript để lấy dữ liệu và gửi biểu mẫu. Một trong những lợi thế của phương pháp này là chuyển hướng đến các trang khác, điều này phụ thuộc vào mã phía máy chủ. Mã này như sau: và bây giờ ở bất cứ nơi nào bạn cần phải ở trong phương thức "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
nguồn

1

Tôi đề nghị một cách tiếp cận năng động hơn, không cần mã hóa html vào trang, hãy giữ nó một cách nghiêm ngặt:

$("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
nguồn

0

Thay vì sử dụng javascript, bạn cũng có thể sử dụng nhãn gửi biểu mẫu ẩn. Giải pháp rất đơn giản và nhỏ. Nhãn có thể ở bất cứ đâu trong html của bạn.

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

Mở rộng đoạn trích

— Gladhon
nguồn

-1

Kiểm tra này nó sẽ giúp bạn

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

— Shoaib Quraishi
nguồn

2

Bạn nên đề cập rằng giải pháp này cần thư viện sau: github.com/mgalante/jquery.redirect

— Felix G.