Зробіть посилання, використовуйте POST замість GET

204

Я не впевнений, чи можливо це навіть можливо. Але мені було цікаво, чи хтось знає, як змусити гіперпосилання передавати деякі змінні та використовувати POST (як форму) на відміну від GET.

javascript  html  http 
— Еліот
джерело
HTML не може цього зробити. JavaScript може зафіксувати подію натискання на посилання та робити все, що ви хочете, якщо ви не можете змінити HTML, а CSS може стилізувати кнопку, як посилання, якщо це лише питання зовнішності.
— sylvain

Відповіді:

98

Ви створюєте форму із прихованими входами, які містять значення для публікації, встановлюєте дію форми на URL-адресу призначення та метод форми для публікації . Потім, після натискання на ваше посилання, запустіть функцію JS, яка подає форму.

Дивіться тут , для прикладу. У цьому прикладі використовується чистий JavaScript, без 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>
— Палантир
джерело
16
Чому це прийнята відповідь? Питання спеціально вимагає використання POST (наприклад, форми) на відміну від GET , але ця відповідь говорить про " встановити дію на URL-адресу призначення та спосіб отримати ".
— Маджід Фуладпур
3
Я це розумію. Що я не розумію, це таке: ми стикаємося з проблемою створення прихованої форми, щоб ми могли розмістити, але потім, після створення форми, чому ви пропонуєте встановити метод GET? У нас було getбез форми, чи не так?
— Маджід Фуладпур
3
Ти правий. Це була помилка, але якимось чином ОП все-таки поправився (можливо, через включене посилання, яке набагато зрозуміліше). Дякуємо, що вказали. Я цілком перефразував це.
— Палантір
3
Я оновив вашу відповідь, щоб використовувати більш сучасний підхід. Якщо ви не погоджуєтесь, сміливо відкатуйте це редагування.
— Michał Perłakowski
3
Немає жодних причин включати Javascript у цей процес. Чому це прийнята відповідь?
— шейкер
322

Для цього вам не потрібен JavaScript. Просто хотілося зробити це зрозумілим, оскільки з моменту опублікування цієї відповіді всі відповіді на це питання передбачають використання JavaScript так чи інакше.

Ви можете зробити це досить легко за допомогою чистого HTML та CSS , створивши форму із прихованими полями, що містять дані, які ви бажаєте надіслати, а потім стилізуючи кнопку подання форми, щоб вона виглядала як посилання.

Наприклад:

.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, який ви використовуєте, може відрізнятися залежно від способу оформлення регулярних посилань на вашому сайті.

— Ajedi32
джерело
4
домовились. Мені потрібен був спосіб зробити це електронною поштою, тому JS не був для мене великим варіантом. Це повинно працювати чудово
— SynackSA
7
Я можу підтвердити це лише один раз. Це майже так само прикро, як той факт, що 99,728% усіх питань HTML в кінцевому підсумку переплутаються з проблемами Javascript або jQuery.
— Раб
3
Це точно простий спосіб використання кнопки, яка виглядає як посилання, але насправді це жорстке кодування. Ви повинні точно знати умови, в яких ця кнопка буде реалізовуватися, і встановлювати їх явно для кожного випадку. Я думаю, що відповіді, засновані на JS / JQuery, є більш загальними, оскільки вони використовують сам елемент посилання (або залежно від того, який елемент).
— MakisH
2
@ Ajedi32 Вибачте, мій коментар був не таким ясним: я в основному намагаюся сказати, що ця кнопка створена саме так, щоб виглядати як елемент <a>. Але якщо ви поставите кнопку навколо інших елементів <a>, які викладені по-різному, наприклад, в різних частинах сторінки, ви повинні дублювати всі правила css <a> також для кнопки, щоб створити правила для наведення курсора, відвідування тощо. Інакше це, звичайно, зробить роботу, але це буде виглядати некрасиво. З іншими рішеннями вам просто не потрібно змінювати жоден CSS, ви просто отримаєте <a> елемент, як і всі інші, які у вас вже є. Звичайно, чистий HTML також має деякі переваги.
— MakisH
1
@Robert AFAIK, жодне з інших запропонованих рішень також не працює із середнім клацанням. Якщо ви дійсно хочете бути педантичними, ви можете сказати, що подати запит на пошту за посиланням неможливо. Ви можете надсилати запити POST лише з формами та JavaScript.
— Ajedi32
48

Ви можете використовувати функції JavaScript. У JQuery вбудована функція приємного повідомлення, якщо ви вирішили використовувати її:

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
джерело
5
Це робить запит POST так, як було запропоновано, але я не міг цим скористатися, тому що мені все-таки потрібно перейти до місця "Wever.php".
— Кріс
6
$.post('page.php', {param: 1}, function() { window.location.href = 'page'.php' });
— JREAM
1
@mplungjan href каже, на яке посилання йдеться, хоча я погоджуюся, що неправильно плутати поведінку та вміст, у цьому випадку javascript є посиланням. Іншими словами "при натисканні на посилання воно виконає поштовий зворотній зв'язок за допомогою JavaScript". Це має більше значення, ніж прив'язка події клацання. Такі жорсткі правила, як "ніколи не використовувати JavaScript у href", такі ж погані, як і будь-яка інша погана практика.
— Менол
@Menol Я сказав: не рекомендується. - не "ніколи не використовувати". Якщо ви дійсно хочете, ви можете зробити <a href="whyjavascript.html" id="postIt">Click Here</a>і мати$("#postIt").on("click",function(e) { e.preventDefault(); $.post("WhateverPage.php", { name: "John", time: "2pm" } ); });
— mplungjan
1
@mplungjan, що рекомендація, як і будь-яка інша, введена, щоб не плутати вміст / поведінку. Коли рекомендація висувається у випадках, не передбачених рамками їх дії, вона починає видаватися жорстким правилом. Наведений вами приклад, здається, пройде зайву милю лише для того, щоб бути на безпечній стороні "правила", тому ніхто не може звинувачувати програміста в майбутньому, але ця безпека досягається ціною читабельності та сенсу. Так виглядає інший прагматичний розробник, але я впевнений, що ви цього не мали на увазі.
— Менол
24

Це старе запитання, але жодна з відповідей не задовольняє запит у повному обсязі. Тож я додаю ще одну відповідь.

Запитаний код, наскільки я розумію, повинен внести лише одну зміну в спосіб роботи звичайних гіперпосилань: POSTзамість цього слід використовувати метод GET. Безпосередніми наслідками будуть:

  1. Після натискання на посилання слід перезавантажити вкладку на URL-адресу href
  2. Оскільки метод POST, у нас не повинно бути рядка запиту в URL-адресі цільової сторінки, яку ми завантажуємо
  3. Ця сторінка повинна отримувати дані в параметрах (імена та значення) POST

Я тут використовую jquery, але це можна зробити за допомогою рідного apis (важче і довше, звичайно).

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

І щоб побачити результат, збережіть наступне як reflector.php у тому самому каталозі, у якому ви зберегли вище.

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

<h2>Post</h2>
<pre>
<?php print_r($_POST); ?>
</pre>
— Мадід Фуладпур
джерело
12

Ще один робочий приклад, використовуючи подібний підхід, розміщений: створити HTML-форму, використовувати JavaScript для імітації публікації. Це робить 2 речі: розмістити дані на новій сторінці та відкрити їх у новому вікні / вкладці.

HTML

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

JavaScript

document.forms["myForm"].submit();
— Квант
джерело
3

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>(наприклад, a <span>або зображення).

— Макіш
джерело
2

Ви можете використовувати цю функцію 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/ )

— DarkThanos
джерело
@DaoLam код насправді працює. Я замінив leserged.free.fr/phpinfo.php на значення в phpref, і він розмістив форму на цьому сайті, передаючи значення.
— JSWilson
2

Як згадується в багатьох публікаціях, це не можливо безпосередньо, але простий і успішний спосіб полягає в наступному: По-перше, ми розміщуємо форму в тілі нашої html-сторінки, яка не має жодних кнопок для надсилання, а також її входів приховані. Тоді ми використовуємо функцію javascript, щоб отримати дані та відправити форму. Однією з переваг цього методу є перенаправлення на інші сторінки, що залежить від коду на стороні сервера. Код такий: і тепер у будь-якому місці вам потрібно бути в методі "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>
— Махді Фіруджа
джерело
1

Я пропоную більш динамічний підхід, без кодування HTML на сторінці, дотримуйтесь строго 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()
})
— Німрод
джерело
0

Замість використання JavaScript, ви також можете використовувати мітку, що надсилає приховану форму. Дуже просте і невелике рішення. Мітка може бути в будь-якому місці вашого 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>
Розгорніть фрагмент

— Гладхон
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.