2

Gostaria que a partir do meu href, ele fosse para a página "spincoin.php" com o método post, enviando a variável "1", como eu posso fazer isso?

Código:

<div>
    <a href="spincoin.php">
        <h2>Product</h2>
        <p>Cost: 100P</p>
    </a>
</div>
9
  • 2
    Por quê não fazer isso utilizando o elemento form mesmo?
    – Woss
    Commented 12/05/2017 às 23:13
  • Sou um pouco leigo em HTML e fiz da maneira que eu achava certo, não sei como ficaria para fazer com o form, já que ele só aceita inputs (eu acho). Caso dê para fazer com o form, como ficaria?
    – Francisco
    Commented 12/05/2017 às 23:16
  • Você pode enganar o usuário, fazê-lo pensar que é um link
    – user60252
    Commented 12/05/2017 às 23:17
  • edita a pergunta que tenho um exemplo pronto
    – user60252
    Commented 12/05/2017 às 23:18
  • Como eu faço isso? Pode me mandar o exemplo? @LeoCaracciolo
    – Francisco
    Commented 12/05/2017 às 23:20

4 Respostas 4

5

Como o @AndersonCarlosWoss comentou, não é possível mandar a um elemento <a> usar método POST diretamente. Para fazer POST, você precisa de um elemento <form>:

<form method="POST" action="spincoin.php">
    <input type="hidden" name="1" value="1">
    <a href="javascript:document.querySelector('form').submit();">Clique aqui</a>
</form>

O elemento <form> representa um formulário, que consiste numa série de campos, que são representados pelos elementos <input>, <select>, <textarea> e <button> descendentes do formulário.

O <form> tem um atributo method que diz qual o método HTTP a usar; neste caso, você quer usar POST, então é isso que pomos. O atributo action indica para qual URL deve ser enviado o formulário.

No caso, este nosso formulário somente tem um campo oculto (isto é, não aparece para o usuário) cujo nome é 1 e cujo valor também é 1. Há outros tipos de campos visíveis: de texto (<input type="text">), dropdown (<select>), checkbox (<input type="check">), botões (<button> ou <input type="button">). Quando o formulário é enviado, ele coleciona todos os seus descendentes que são campos e os envia para a URL de destino com ou o atributo id ou o atributo name como chave (se ambos estiverem definidos, id tem preferência) e o atributo value como valor.

Finalmente, normalmente o formulário é enviado clicando num controle <input type="submit">, mas com um pouco de javascript podemos fazer um link comum enviá-lo, usando o schema de URL javascript:. Basta obter uma referência ao form (no exemplo, usando document.querySelector() e chamar o método submit(). O resto funciona automaticamente.

Um último caveat: se você quiser transferir um arquivo anexo (através do controle <input type="file">), o <form> vai precisar ter o atributo enctype="multipart/form-data" (o padrão é application/x-www-form-urlencoded). De outra forma, o anexo não será enviado.

2
  • Acho que se você utilizar this.parentNode.submit() no elemento a fica melhor não só em questão de performance, pois o JS não precisa fazer a busca do elemento, como você permite a existência de múltiplos formulários na página.
    – Woss
    Commented 13/05/2017 às 0:02
  • @AndersonCarlosWoss Naturalmente, existem vários métodos de se obter uma referência ao formulário; escolhi uma a esmo. this.parentNode pode ser uma opção, mas não testei para ver se funcionava corretamente ou não. Em todo caso, a ideia era explicar ao OP o que é um elemento <form> e quais as suas características para que ele escolha o que serve pra ele e o que não serve, em vez de somente copiar e colar uma resposta pronta.
    – Wtrmute
    Commented 13/05/2017 às 1:01
2

Eu acho impossível método post por url. O que se pode fazer é disfarçar o botão.

Como não queremos que se veja o formulário, só queremos enviar seus dados por POST, o campo do formulário é hidden, ou seja, oculto.

1: Botão como se fosse uma imagem

O valor a ser passado está no input hidden de name var e value 1

.tim{
border: 2px solid #AD235E;
border-radius: 100px;
width: 150px;
height: 150px; background-image: url(http://kithomepage.com/sos/kkl.png);
}
.tim:hover {
    cursor: pointer;
}
<form action="https://pt.stackoverflow.com/questions?sort=newest" method="POST">
    <input type="hidden" name="var" value="1" />
    <button class="tim">
    </button>
</form>

2: Botão como se fosse um link

.tim {
    border: 0;
    padding: 0;
    display: inline;
    background: none;
    text-decoration: underline;
    color: blue;
}
button:hover {
    cursor: pointer;
}
<form action="https://pt.stackoverflow.com/questions?sort=newest" method="POST">
    <input type="hidden" name="var" value="1" />
    <button class="tim">Pagina destino
    </button>
</form>

Se a informação a ser passada não é relevante pode passar pelo método GET usando um parâmetro na própria URL <a href="spincoin.php?var=1"....

<div style="height:200px;width:350px;position:static;margin-left:120px;border-style:solid">
<a href="spincoin.php?var=1" style="border-bottom: none;">
    <img style="width: 360px;" src="images/btn.png"/>
    <h2 style="color:white;font-size:24px;position:absolule;margin-top:-180px;margin-left:15px;">FREE HACK - Wallhack</h2>
    <p style="margin-left:15px;">See all through the wall with the free hack.</p>
    <p style="margin-right:10px; text-align: right; margin-top:53px; font-size: 25px; color: white">Cost: 100P</p>
  </a>
 /div>

e recuperar na página destino da seguinte forma:

   $var = $_GET["var"];

Dessa forma vai atender melhor seu HTML

2
  • tinha esquecido o metodo post
    – user60252
    Commented 12/05/2017 às 23:59
  • Obrigado pela dica, vou testar o método get.
    – Francisco
    Commented 13/05/2017 às 0:15
1

Olha também podemos utilizar JQuery para fazer um post, exemplo:

<?php
 // trecho q devera gerar a saida
 // coloquei .PHP_EOL caso queira interromper a execucao e depurar erros
 $jquery = ''.PHP_EOL; 
 $jquery .= ' var MinhaVarAqui1 = "'.$var1.'";'.PHP_EOL;
 $jquery .= ' var MinhaVarAqui2 = "'.$var1.'";'.PHP_EOL;
 $jquery .= ' var MinhaVarAqui3 = "'.$var1.'";'.PHP_EOL;

 // va declarando as variaveis a serem postadas conforme a necessidade

 // aqui vamos realizar o post sem form
 $.post("INFORME_A_URL_DESEJADA_AQUI ex: http://meusite.com/scripa.php",{ var1:MinhaVarAqui1, var2:MinhaVarAqui2, var3:MinhaVarAqui3 });

 $jquery .= ''.PHP_EOL;
?>

Procura ler sobre o .post do jquery ele é muito útil.

-4

function methodPOST(endPoint, reload) {
    try{
        client = new XMLHttpRequest();      
        baseURL = location.protocol + '//' + location.host;
        client.open('post',baseURL + endPoint,true);
        client.onload = () => {
            if (reload) 
            location.reload();
        };
        client.send(null);      
    }
    catch(e){
        console.error('Error: ' + e);
    }
}

/*
    scripts.js
    
    Dev: Rafael Souza
    Site: https://rafaelsouzars.github.io
    Componente: função
    Identificador: "methodPOST" 
    Descrição: implementa o uso método POST no atributo href da tag <a>

    Parametros da função:
    
    endPoint: armazena o endpoint que receberá a requisição.
    reload: recebe valores booleanos responsaveis em ativar/desativar a atualização da página solicitante.

*/
<a href="javascript:methodPOST('/cursos/excluir/{{curso.id}}',true)">Excluir</a>

1

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .