Faça um link usar POST em vez de GET

204

Não tenho certeza se isso é possível. Mas eu queria saber se alguém sabe como fazer um hiperlink passar algumas variáveis ​​e usar POST (como um formulário) em vez de GET.

javascript html http Elliot
fonte
HTML não pode fazer isso. O JavaScript pode capturar o evento click no link e fazer o que você quiser, se não puder alterar o HTML e o CSS, pode estilizar botões como links se for apenas uma questão de aparência.
sylvain

Respostas:

98

Você cria um formulário com entradas ocultas que mantêm os valores a serem postados, define a ação do formulário com o URL de destino e o método do formulário a postar . Em seguida, ao clicar no seu link, acione uma função JS que envia o formulário.

Veja aqui , para um exemplo. Este exemplo usa JavaScript puro, sem jQuery - você pode escolher se não deseja instalar nada além do que já possui.

<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
fonte
16
Por que essa é a resposta aceita? A pergunta solicita especificamente o uso de POST (como um formulário) em vez de GET , mas essa resposta diz " definir ação para o URL de destino e o método a ser obtido ".
Majid Fouladpour
3
Entendi. O que não entendo é o seguinte: criamos um problema oculto para criar um formulário oculto para que possamos POSTAR, mas depois que o formulário é criado, por que você propõe definir o método GET? Tivemos getsem o formulário, não é?
Majid Fouladpour
3
Você está certo. Isso foi um erro, mas de alguma forma o OP ainda acertou (provavelmente por causa do link incluído, que é muito mais claro). Obrigado por apontar. Eu reformulei isso inteiramente.
Palantir
3
Atualizei sua resposta para usar uma abordagem mais moderna. Se você discordar, sinta-se à vontade para reverter esta edição.
Michał Perłakowski
3
Não há razão para envolver o Javascript nesse processo. Por que essa é a resposta aceita?
shacker
322

Você não precisa de JavaScript para isso. Só queria deixar isso claro, já que no momento em que essa resposta foi publicada, todas as respostas a essa pergunta envolvem o uso de JavaScript de uma maneira ou de outra.

Você pode fazer isso facilmente com HTML e CSS puro , criando um formulário com campos ocultos contendo os dados que deseja enviar e, em seguida, estilizando o botão de envio do formulário para parecer um link.

Por exemplo:

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

O CSS exato que você usa pode variar, dependendo do estilo dos links regulares em seu site.

Ajedi32
fonte
4
acordado. Eu precisava de uma maneira de fazer isso em um email, então o JS não era uma opção muito importante para mim. Isso deve funcionar perfeitamente
SynackSA
8
Eu só consigo votar isso uma vez. Isso é quase tão triste quanto o fato de que 99,728% de todas as perguntas em HTML acabam sendo confundidas com problemas de Javascript ou jQuery.
Rab
3
Essa é com certeza uma maneira simples de usar um botão que se parece com um link, mas na verdade é codificado. Você precisa saber exatamente as condições em que esse botão viverá e as definirá explicitamente para todos os casos. Eu acho que as respostas baseadas em JS / JQuery são mais genéricas, pois estão usando o próprio elemento de link (ou qualquer outro elemento).
58568 MakisH #
2
@ Ajedi32 Desculpe, meu comentário não foi tão claro: eu principalmente tento dizer que esse botão foi criado especificamente para parecer um elemento <a>. Mas se você colocar o botão em volta de outros elementos <a> com estilos diferentes, por exemplo, em partes diferentes da página, você deverá duplicar todas as regras css do <a> também para o botão, para criar regras para passar o mouse, visitar etc. Caso contrário, é claro que ele fará o trabalho, mas ficará feio. Com as outras soluções, você simplesmente não precisa alterar nenhum CSS, apenas obtém um elemento <a> como todos os outros que já possui. Claro que o HTML puro também tem algumas vantagens.
MakisH
1
@ Robert AFAIK, nenhuma das outras soluções propostas também funciona com o clique do meio. Se você realmente quer ser pedante, pode dizer que é impossível enviar uma solicitação POST com um link. Você pode enviar solicitações POST apenas com formulários e JavaScript.
precisa saber é o seguinte
48

Você pode usar funções javascript. O JQuery possui uma boa função de postagem incorporada, se você decidir usá-lo:

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
fonte
5
Isso faz a solicitação POST conforme solicitado, mas não pude usá-la porque ainda preciso ir para o local "Whatever.php".
Chris
6
$.post('page.php', {param: 1}, function() { window.location.href = 'page'.php' });
JREAM 21/03
1
@mplungjan href diz aonde o link está se referindo, embora eu concorde que é errado confundir comportamento e conteúdo, neste caso o javascript é a referência. Em outras palavras "quando você clica no link, ele executa uma postagem usando JavaScript". Isso tem mais significado do que vincular um evento de clique. Regras rígidas como "nunca use javascript no href" são tão ruins quanto qualquer outra prática ruim.
Menol 31/10/19
@ Menol eu disse: não recomendado. - não "nunca use". Se você realmente quiser, você pode fazer <a href="whyjavascript.html" id="postIt">Click Here</a>e ter$("#postIt").on("click",function(e) { e.preventDefault(); $.post("WhateverPage.php", { name: "John", time: "2pm" } ); });
mplungjan
1
@mplungjan essa recomendação como qualquer outra é apresentada para evitar conteúdo / comportamento confuso. Quando uma recomendação é apresentada em casos fora do escopo pretendido, ela começa a aparecer como uma regra rígida. O exemplo que você deu parece ir além para estar no lado seguro da "regra", para que ninguém possa culpar o programador no futuro, mas essa segurança é alcançada ao custo da legibilidade e do significado. É assim que parece para outro desenvolvedor pragmático, mas tenho certeza que você não quis dizer isso.
Menol 31/10/19
24

Esta é uma pergunta antiga, mas nenhuma das respostas atende à solicitação na íntegra. Então, eu estou adicionando outra resposta.

O código solicitado, pelo que entendi, deve fazer apenas uma alteração na maneira como os hiperlinks normais funcionam: o POSTmétodo deve ser usado em vez de GET. As implicações imediatas seriam:

  1. Quando o link é clicado, devemos recarregar a guia na URL do href
  2. Como o método é POST, não devemos ter nenhuma string de consulta no URL da página de destino que carregamos
  3. Essa página deve receber os dados em parâmetros (nomes e valor) por POST

Estou usando o jquery aqui, mas isso pode ser feito com APIs nativas (mais difícil e mais longo, é claro).

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

E para ver o resultado, salve o seguinte como reflector.php no mesmo diretório que você salvou acima.

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

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

Outro exemplo de trabalho, usando uma abordagem semelhante publicada: crie um formulário html, use javascript para simular a postagem. Isso faz duas coisas: publique os dados em uma nova página e abra-os em uma nova janela / guia.

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

HTML + JQuery : um link que envia um formulário oculto com o POST.

Como passei muito tempo compreendendo todas essas respostas e todas elas têm alguns detalhes interessantes, aqui está a versão combinada que finalmente funcionou para mim e que eu prefiro por sua simplicidade.

Minha abordagem é novamente criar um formulário oculto e enviá-lo clicando em um link em outro lugar da página. Não importa onde, no corpo da página, o formulário será colocado.

O código para o formulário:

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

Descrição:

O display: noneoculta o formulário. Como alternativa, você pode colocá-lo em uma div ou outro elemento e defini-lo display: noneno elemento

O type="hidden"criará um fild que não será mostrado, mas seus dados serão transmitidos às eitherways de ação ( ver W3C ). Entendo que esse é o tipo de entrada mais simples.

O código para o link:

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

Descrição:

O vazio hrefapenas segmenta a mesma página . Mas isso realmente não importa nesse caso, pois return falseo navegador será interrompido de seguir o link. Você pode mudar esse comportamento, é claro. No meu caso específico, a ação continha um redirecionamento no final.

O onclickfoi usado para evitar o uso, href="javascript:..."conforme observado por mplungjan . o$('#myHiddenFormId').submit(); foi usado para enviar o formulário (em vez de definir uma função, pois o código é muito pequeno).

Este link será exatamente igual a qualquer outro <a>elemento. Você pode realmente usar qualquer outro elemento em vez de <a>(por exemplo, uma <span>ou uma imagem).

MakisH
fonte
2

Você pode usar esta função 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();
}

Aqui está um exemplo em jsFiddle ( http://jsfiddle.net/S7zUm/ )

DarkThanos
fonte
@ DaoLam o código realmente funciona. Substituí leserged.free.fr/phpinfo.php pelo valor em phpref e ele postou o formulário no site, passando os valores.
JSWilson
2

Como mencionado em muitos posts, isso não é diretamente possível, mas uma maneira fácil e bem-sucedida é a seguinte: Primeiro, colocamos um formulário no corpo da nossa página html, que não possui botões para o envio e também suas entradas estão escondidos. Em seguida, usamos uma função javascript para obter os dados e enviar o formulário. Uma das vantagens desse método é redirecionar para outras páginas, que depende do código do servidor. O código é o seguinte: e agora em qualquer lugar você precisa estar no método "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
fonte
1

Sugiro uma abordagem mais dinâmica, sem codificação html na página, mantenha-a estritamente 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
fonte
0

Em vez disso, usando javascript, você também pode usar um rótulo enviando um formulário oculto. Solução muito simples e pequena. O rótulo pode estar em qualquer lugar do seu 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>
Expandir snippet

Gladhon
fonte
-1

Marque isto e irá ajudá-lo 

$().redirect('test.php', {'a': 'value1', 'b': 'value2'});
Shoaib Quraishi
fonte
2
Você deve mencionar que esta solução tem a seguinte biblioteca: github.com/mgalante/jquery.redirect
Felix G.