Carregar resultado de um form dentro de uma div (jQuery + Ajax)
Publicado por Fábio Berbert de Paula (última atualização em 15/01/2015)
[ Hits: 18.584 ]
Homepage: https://mestrefabio.com
Este código demonstra de forma simples como combinar jQuery com Ajax para carregar o resultado do processamento de um formulário dentro de uma div.
index.html: <html> <body> <form> Nome: <input type="text" name="nome"><br/> E-mail: <input type="text" name="email"><br/> <button type="button" id="butEnviar">Enviar</button> </form> <br/><br/> <div id="saida"></div> <!-- bibliotecas do jquery --> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <!-- bibliotecas do jquery --> <script> $(document).ready(function() { //definir evento "onclick" do elemento (botao) ID butEnviar $("#butEnviar").click(function() { //capturar o valor dos campos do fomulario var nome = $("input[name=nome]").val(); var email = $("input[name=email]").val(); //usar o metodo ajax da biblioteca jquery para postar os dados em processar.php $.ajax({ "url": "processar.php", "dataType": "html", "data": { "nome" : nome, "email":email }, "success": function(response) { //em caso de sucesso, a div ID=saida recebe o response do post $("div#saida").html(response); } }); }); }); </script> </body> </html> processar.php: <?php $nome = $_REQUEST['nome']; $email = $_REQUEST['email']; echo "Seu nome é <strong>$nome</strong>, teu email <strong>$email</strong> e...<br/><br/>VIVA O LINUX!!!"; ?>
Desmarcando input radio com jQuery
Calculadora Bem Legal box shadow e border Radius
Crie alias para as tarefas que possuam longas linhas de comando - bash e zsh
Criando um gateway de internet com o Debian
Configuração básica do Conky para mostrar informações sobre a sua máquina no Desktop
Aprenda a criar músicas com Inteligência Artificial usando Suno AI
Entendendo o que é URI, URL, URN e conhecendo as diferenças entre POST e GET
Instalando Discord no Ubuntu 24.04 LTS
Como instalar o XFCE4-terminal na sua distribuição Linux e integrá-lo ao sistema
Como instalar o Tilix Terminal no Gnome e usá-lo como menu drop-down ao estilo Quake
Problemas na configuração da acentuação do meu teclado ABNT2 (6)
Tela de login/senha com defeito (4)
BUG ao atualizar pacotes libglib2.0-0 libglib2.0-bin libglib2.0-data (8)