Сделать ссылку использовать POST вместо GET - PullRequest
Новая
       8

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

174 голосов
/ 12 октября 2010

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

Ответы [ 10 ]

274 голосов
/ 24 ноября 2015

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

84 голосов
/ 12 октября 2010

Вы создаете форму со скрытыми входными данными, в которой хранятся значения для публикации, задаете для действия формы адрес назначения, а для метода формы - post . Затем, когда вы нажмете на вашу ссылку, запустите функцию JS, которая отправит форму.

См. здесь , например. В этом примере используется чистый JavaScript без jQuery & mdash; Вы можете выбрать это, если не хотите устанавливать что-либо еще, чем у вас уже есть. 

<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>
42 голосов
/ 12 октября 2010

Вы можете использовать функции 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>
24 голосов
/ 30 ноября 2014

Это старый вопрос, но ни один из ответов не полностью отвечает запросу.Поэтому я добавляю еще один ответ.

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

  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>

И чтобы увидеть результат, сохраните следующее как refleor.php в том же каталоге, в котором вы сохранили выше.1021 *

Почта 

<?php print_r($_POST); ?>
10 голосов
/ 24 декабря 2013

Другой рабочий пример, использующий похожий опубликованный подход: создайте 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();
4 голосов
/ 12 октября 2010

Это невозможно при использовании необработанного HTML, хотя вы можете использовать jQuery для добавления обработчика событий click к ссылке, которая может использовать функцию post для выдачи POST.

3 голосов
/ 03 октября 2016

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" создаст файл, который не будет отображаться, но его данные будут также переданы действию ( см. 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> (например, <span> или изображение).

2 голосов
/ 13 февраля 2014

Вы можете использовать эту функцию 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/)

0 голосов
/ 02 июля 2019

Как уже упоминалось во многих сообщениях, это невозможно напрямую, но простой и успешный способ заключается в следующем: во-первых, мы помещаем форму в тело нашей 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>
0 голосов
/ 26 сентября 2017

Отметьте, это поможет вам 

$().redirect('test.php', {'a': 'value1', 'b': 'value2'});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...