Сделать ссылку использовать POST вместо GET

206

Я не уверен, возможно ли это вообще. Но мне было интересно, знает ли кто-нибудь, как заставить гиперссылку передавать некоторые переменные и использовать POST (например, форму), а не GET.

javascript html http Эллиот
источник

HTML не может этого сделать. JavaScript может отлавливать событие нажатия на ссылку и делать то, что вы хотите, если вы не можете изменить HTML, а CSS может стилизовать кнопки как ссылки, если это только вопрос внешнего вида.

Сильвен

99

Вы создаете форму со скрытыми входными данными, в которой хранятся значения для публикации, задаете действие формы для целевого 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>

Palantir
источник

16

Почему это принятый ответ? Вопрос, в частности, требует использования POST (например, формы), а не GET , но в этом ответе говорится « установить действие для целевого URL и метода для получения ».

Маджид Фуладпур

3

Я понимаю. Что я не понимаю, так это: мы сталкиваемся с проблемой создания скрытой формы, чтобы мы могли POST, но затем, после создания формы, почему вы предлагаете установить метод на GET? У нас было getбез формы, не так ли?

Маджид Фуладпур

3

Ты прав. Это было ошибкой, но каким-то образом ОП все еще правильно понял (вероятно, из-за включенной ссылки, которая намного понятнее). Спасибо за указание. Я перефразировал это полностью.

Палантир

3

Я обновил ваш ответ, чтобы использовать более современный подход. Если вы не согласны, не стесняйтесь отменить это изменение.

Михал Перлаковский

3

Нет причин привлекать Javascript к этому процессу. Почему это принятый ответ?

Шейкер

324

Вам не нужен 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

8

Я могу поднять это только один раз. Это почти так же грустно, как и тот факт, что 99,728% всех вопросов HTML в итоге будут перепутаны с проблемами Javascript или jQuery.

Раб

3

Это, безусловно, простой способ использовать кнопку, которая выглядит как ссылка, но на самом деле это жесткое кодирование. Вы должны точно знать условия, в которых будет жить эта кнопка, и устанавливать их явно для каждого случая. Я думаю, что ответы, основанные на JS / JQuery, являются более общими, поскольку они используют сам элемент ссылки (или любой другой элемент).

MakisH

2

@ Ajedi32 Извините, мой комментарий был не так ясен: я в основном стараюсь сказать, что эта кнопка специально разработана для того, чтобы выглядеть как элемент <a>. Но если вы поместите кнопку вокруг других элементов <a>, стилизованных по-разному, например, в разных частях страницы, вам придется продублировать все правила CSS для <a> и кнопки, чтобы создать правила для наведения, посещений и т. Д. В противном случае это, конечно, сделает работу, но это будет выглядеть уродливо. С другими решениями вам просто не нужно менять CSS, вы просто получаете элемент <a>, как и все остальные, которые у вас уже есть. Конечно, чистый HTML также имеет некоторые преимущества.

MakisH

1

@ Роберт AFAIK, ни одно из других предложенных решений также не работает со средним щелчком мыши. Если вы действительно хотите быть педантичным, вы можете сказать, что отправка запроса POST со ссылкой невозможна. Вы можете отправлять только запросы POST с формами и JavaScript.

Ajedi32

48

Вы можете использовать функции JavaScript. JQuery имеет хорошую встроенную функцию post, если вы решите ее использовать:

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 в соответствии с запросом, но я не смог его использовать, потому что мне все еще нужно перейти в папку «Whever.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. Непосредственные последствия будут:

Когда ссылка нажата, мы должны перезагрузить вкладку в URL href
Поскольку метод POST, у нас не должно быть строки запроса в URL целевой страницы, которую мы загружаем
Эта страница должна получать данные в параметрах (имена и значения) POST

Я использую jquery здесь, но это может быть сделано с нативным API (сложнее и дольше, конечно).

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

И чтобы увидеть результат, сохраните следующее как refleor.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();

Quannt
источник

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элемент on.

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>или изображение).

Makish
источник

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, и он разместил форму на этом сайте, передавая значения.

Дж. С. Уилсон

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>

Развернуть фрагмент

Gladhon
источник

-1

Проверьте это, это поможет вам

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

Shoaib Quraishi
источник

2

Следует отметить, что для этого решения требуется следующая библиотека: github.com/mgalante/jquery.redirect

Феликс Г.

Сделать ссылку использовать POST вместо GET

Ответы: