Como enviar acão com jquery

[drx 0]

Olá pessoal!

 

Como que eu faço para enviar uma ação via jquery ou Ajax, de forma que eu carregue na mesma página as informações enviadas?

 

Tipo assim:

Eu clico em uma imagem (Adicionar no Carrinho)...  e quero adicionar no carrinho logo abaixo na mesma página.

 

<td height="10"><a href="carrinho_vitrine.php?acao=add&id='.$id.'">
<img src="img/comprar-1.png" name="btn_add_v2" id="btn_add_v2" height="50" width="120" align="center" title="Adicionar ao Carrinho" 
value="btn_add_v2" style="visibility:visible;"></a></td>

 

Desde já agradeço.

 

[Guilherme Luiz 41]

Você precisa ver sobre Onclick e Innerhtml...

https://www.devmedia.com.br/ajax-tutorial/24797

 

bons estudos

[Uerlen Santos 15]

Fala drx, segue um exemplo para a chamada click. 

Mas como o @Guilherme Luiz já disse... vai precisar de um pouco de estudo para utilizar, infelizmente nem tudo é ctrl + c, ctrl + v.

 

//HTML
<button name="addVolumeFrete" id="addVolumeFrete" type="button" class="btn btn-large btn-primary">Adicionar</button>

//SCRIPT
$("#addVolumeFrete").click(function () {     
                    $.ajax({
                        type: "POST",
                        url: "<%=ResolveUrl("~/Servicos/Volume.asmx/AddVolume") %>",
                        data: "{ 'parametro': 'valor parametro'}",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (retorno) {
                          //
                          $('#tabelaAlvo').append('<tr><td>' + retorno + '</td></tr>');
                        },
                       error: function (msg) {
                           console.log(msg);
                       }
                    });
  });

Espero ter ajudo e bons estudos!

[Adriano Rabello 0]

O exemplo ai de cima não vai funcionar. 

 

Pois ele colou a imagem em uma tag  <a>  e ao clicar ele sera redirecionado para o caminho que esta na imgem imagem. 

 

Fica um pouco complexo te explicar as funcionalidades do ajax, mas vou tentar resumir aqui: com base no que o que o colega mencionou 

 

// selecione o tag cujo o atributo id = addVolumeFrete
// ao clicar nesse elemento ele irá executar uma chamada do ajax via método POST para 
// a pagina que esta descrita na url
// o (e) dentro dos parenteses é para capturar o evento (no caso click) e o preventDefault 
// para evitar de abrir a url na tag <a>
// ou seja, com o ajax voce esta postantdo para a url o valor que vem em data
// no formato json ( no caso que o colega colocou ai
// e o resultado dessa requisição será exibida no elemento que tem o id = tabelaAlvo


$("#addVolumeFrete").click(function (e) { 
  e.preventDefault();
                    $.ajax({
                        type: "POST",
                        url: "<%=ResolveUrl("~/Servicos/Volume.asmx/AddVolume") %>",
                        data: "{ 'parametro': 'valor parametro'}",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (retorno) {
                          //
                          $('#tabelaAlvo').append('<tr><td>' + retorno + '</td></tr>');
                        },
                       error: function (msg) {
                           console.log(msg);
                       }
                    });
  });