Formulário com AJAX

Luuuizmb · 31 de julho de 2014

Olá,

Estou tentnado fazer um teste com formulário que usando do AJAX enviam os dados sem dar refresh na página. Observem, este é meu index:

<?php include("../projeto/conexao.php"); ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Envio de formulário sem refresh com JQuery/PHP</title><!-- Incluimos a biblioteca do jquery --><script type="text/javascript" language="javascript" src="../projeto/jquery-1.3.2.js"></script><!-- Criamos as funções necessárias para envio do formulário --><script type="text/javascript" language="javascript">$(function($) {    // Quando o formulário for enviado, essa função é chamada    $("#formulario").submit(function() {        // Colocamos os valores de cada campo em uma váriavel para facilitar a manipulação        var resposta = $("#resposta").val();        // Exibe mensagem de carregamento        $("#status").html("<img src='loader.gif' alt='Enviando' />");        // Fazemos a requisão ajax com o arquivo envia.php e enviamos os valores de cada campo através do método POST        $_POST('../projeto/envia.php', {resposta: resposta }, function(resposta) {                // Quando terminada a requisição                // Exibe a div status                $("#status").slideDown();                // Se a resposta é um erro                if (resposta != false) {                    // Exibe o erro na div                    $("#status").html(resposta);                }                // Se resposta for false, ou seja, não ocorreu nenhum erro                else {                    // Exibe mensagem de sucesso                    $("#status").html("Mensagem enviada com sucesso!");                    // Coloca a mensagem no div de mensagens                    $("#mensagens").prepend("<strong>"+ resposta +"</strong>");                    // Limpando todos os campos                    $("#resposta").val("");                }        });    });});</script></head><body><h1>Escrever Mensagem</h1><div id="status"></div><div id="escrever">    <form id="formulario" action="javascript:func()" method="post">        <strong>Resposta:</strong> <br />        <input name="resposta" type="text" id="resposta" size="35" /> <br /><br />                <input type="submit" value="Enviar" />            </form></div></body></html>

Só há um campo denominado resposta! Assim como tenho uma tabela no banco de dados chamada respostas, e faço uma simples comparação para ver se está correto! Observem o envia.php que faz todo este serviço:

<?php// Incluimos o arquivo de conexãoinclude("../projeto/conexao.php")// Recuperamos os valores dos campos através do método POST$resposta = $_POST["resposta"];// Se não houver nenhum erroelse {    // Inserimos no banco de dados    $sql_respostas = "SELECT * FROM respostas WHERE cod_res = 1";    $rs = mysql_query($sql_respostas);    while($dados = mysql_fetch_object($rs)){    $c = $dados->resposta;}    if($resposta == $c){                $sql = "UPDATE equipes SET atual='2' WHERE cod_equi = 1";                if(mysql_query($sql)){                    echo "<script>alert('Resposta correta!');window.location='c2.php';</script>";                    }    }else{        echo "ERRADO!";    }    // Se inserido com sucesso    if ($rs) {        echo false;    }    // Se houver algum erro ao inserir    else {        echo "Não foi possível inserir a mensagem no momento.";    }}?>

Mas, não dá certo! Gostaria que me ajudassem.

Tutorial que eu vi: http://www.oficinadanet.com.br/artigo/php/ajax_envio_de_formulario_sem_refresh_com_jqueryphp

Aguardo!

DiF · 1 de agosto de 2014

Olá,

Você está utilizando a função do jquery de forma errada.

Veja este trecho:

$(function($) {    // Quando o formulário for enviado, essa função é chamada    $("#formulario").submit(function() {        // Colocamos os valores de cada campo em uma váriavel para facilitar a manipulação        var resposta = $("#resposta").val();        // Exibe mensagem de carregamento        $("#status").html("<img src='loader.gif' alt='Enviando' />");        // Fazemos a requisão ajax com o arquivo envia.php e enviamos os valores de cada campo através do método POST        $_POST('../projeto/envia.php', {resposta: resposta }, function(resposta) {

Mais precisamente na linha 9.

o correto é:

 $.post('envia.php', {resposta: resposta }, function(resposta) {

Particularmente não gosto desse jeito, recomendo usar a função $.ajax() que permite mais de um callback( retorno)

Luuuizmb · 1 de agosto de 2014

Desculpe, mas mesmo trocando continua dando errado. Eu usei esse método pois é o único tutorial que achei que explicasse bem.

DiF · 1 de agosto de 2014

Bem.. este é o GRANDE erro da maioria.. pegam tutoriais pela internet que são mal explicados... desculpe eu vi o site do tutorial.. e achei nada prático... o "autor" não explica o por que das coisas e etc.

Uma coisa que eu acho muito ruim é que o exemplo que deveria ser simples de entender acaba se tornando um pesadelo.. pois enchem de coisas e efeitinhos... experimente enxugar esse monte de coisas e teste só o que de fato é necessário. Depois que aprender.. aí sim você pode enfeitar com efeitos visuais.

Vou explicar da forma que acho mais simples de alguém entender:

Estrutura do HTML:

<h1>Escrever Mensagem</h1><div id="status"></div><div id="escrever">    <form id="formulario" action="#" method="post">        <strong>Resposta:</strong> <br />        <input name="resposta" type="text" id="resposta" size="35" /> <br /><br />                <input type="submit" value="Enviar" />            </form></div>

Não tem muito o que falar, mas retirei o action pois como você quer fazer uma requisição assíncrona com o ajax ele se torna desnecessário.

estrutura jQuery:

Como podes ver, no seu código do exemplo do tutorial ele é muito sujo.. e ainda possui um mal hábito, omitir a sintaxe padrão.

$(document).ready(function() {    $("#formulario").submit(function() {        var resposta = $("#resposta").val();        $.ajax({            url: '../projeto/envia.php',            dataType: 'html',            type: 'post',            data: {resposta: resposta})            .done(function( callback ) {                 $('#status').html(callback);            });           });                  });   });

Linha 1, chamada do jquery.. no seu exemplo eles utilizam a forma simplificada.. antes de utilizar você precisa saber da forma convencional

Linha 2, atribui ao formulário o evento de submit.

Linhas 4 e 13, Chamada da função $.ajax() superior a função $.post.

Linha 5, define o caminho do script php que será requisitado.

Linha 6, define o tipo de dados para HTML

LInha 7, define o método que será enviado, no caso como post

Linha 8, o atributo data é no caso o campo que será submetido ( se tiver mais de um campo precisa separar por virgula entre as chaves... Se for muitos campos o melhor é utilizar a função serialize()

Linha 9, Nova função para definição se foi bem sucedido. (antes possuía as funções success e error... elas se tornaram obsoletas agora que existe a função done() e fail()

Linha 10, insere no DIV o retorno do script php.

Antes de tentar inserir no banco de dados, teste mostrando os dados em tela.

Recomendações: Se quer aprender a utilizar o ajax com jquery,.. não se baseie pelos tutoriais existentes.. pois os mesmos estão obsoletos... por isso recomendo que leia os artigos de explicação diretamente do site do jquery:

http://api.jquery.com/jquery.ajax/

http://api.jquery.com/jquery.post/

Estes estão atualizados e muito bem explicados... o único porém é inglês...

Luuuizmb · 2 de agosto de 2014

Olá,

Bem, melhorou um pouco. Mas quando eu digito a resposta errada, deveria aparecer na div status "Resposta errada!". E caso fosse certa, o contrário. Porém, ao clicar em enviar, ele não retorna nada e o campo é limpo. Poderia verificar para mim? Acho que o erro está no envia.php:

<?phpinclude("../projeto/conexao.php")$resposta = $_POST["resposta"];else {    $sql_respostas = "SELECT * FROM respostas WHERE cod_res = 1";    $rs = mysql_query($sql_respostas);    while($dados = mysql_fetch_object($rs)){    $c = $dados->resposta;}    if($resposta == $c){                $sql = "UPDATE equipes SET atual='2' WHERE cod_equi = 1";                if(mysql_query($sql)){                    echo "Resposta correta!";                    }    }else{        echo "ERRADO!";    }    if ($rs) {        echo false;    }    else {        echo "Não foi possível inserir a mensagem no momento.";    }}?>

O index.php:

<?php include("../projeto/conexao.php"); ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Envio de formulário sem refresh com JQuery/PHP</title><script type="text/javascript" language="javascript" src="../projeto/jquery-1.3.2.js"></script><script type="text/javascript" language="javascript">    $(document).ready(function() {    $("#formulario").submit(function() {    var resposta = $("#resposta").val();    $.ajax({    url: '../projeto/envia.php',    dataType: 'html',    type: 'post',    data: {resposta: resposta})    .done(function( callback ) {    $('#status').html(callback);    });    });    });    });</script></head><body><h1>Escrever Mensagem</h1> <div id="status"></div> <div id="escrever"><form id="formulario" action="#" method="post"><strong>Resposta:</strong> <br /><input name="resposta" type="text" id="resposta" size="35" /> <br /><br /><input type="submit" value="Enviar" /></form></div></body></html>

Aguardo!

DiF · 2 de agosto de 2014

Eu tinha escrito uma resposta mais cedo.. mas deu problemas e perdi tudo que já tinha

escrito.. então vou ser mais breve.

Altere a versão do jquery que você está utilizando. Atualmente ele está na 2.1.1... por

isso provavelmente a função de retorno o .done() não funciona pois só foi implementado

recentemente.

Sobre o php.. sim pode conter erros.. ainda mais do jeito que estás fazendo.

Experimente indo aos poucos.. como por exemplo recebendo o dado do formulário e exibindo

em tela.. se aparecer no DIV "status" a resposta que você digitou.. a requisição

funcionou como deveria eaí comprova que o erro pode estar no php.

Depois o próximo passo é buscar os dados na tabela para comparar a resposta certa.

Perceba que no seu php está muito sujo com muitas verificações... você pode diminuir o

número de linhas... e utilizar a sintaxe alternativa do php para deixa-lo mais legível.

eis um exemplo de como ficaria seu código na sintaxe alternativa:




<?php

include "../projeto/conexao.php";



$resposta = $_POST["resposta"];

$rs = mysql_query("SELECT * FROM respostas WHERE cod_res = 1");

while($dados = mysql_fetch_object($rs)):

  if($resposta == $dados->resposta):

      $atualiza = mysql_query("UPDATE equipes SET atual='2' WHERE cod_equi = 1");

      if(atualiza):

        echo "Resposta correta!"; 

      else:

        echo "ERRADO!";         

      endif;            

endwhile;

?>

Luuuizmb · 2 de agosto de 2014

Olá,

Troquei a versão por esta:

http://code.jquery.com/jquery-2.1.1.js

E coloquei o código com a sintaxe alternativa. Porém novamente está acontecendo o que lhe falei. Tentei deixar assim o envia.php só para testes:

<?phpinclude "../projeto/conexao.php";$resposta = $_POST["resposta"];echo $resposta;?>

E mesmo assim não aparece nada na div status! Não sei o que fazer.

DiF · 2 de agosto de 2014

Bom, então se só com php desse jeito, você não obteve resposta NO(ele é um elemento e não "uma elemento") DIV status, então a requisição não está funcionando como deveria há algum erro em algum lugar.

Só para testes, dentro da função done() comente a linha $('#status').html(callback); e coloque um alert(callback); e veja o que aparece...

veja se o caminho url: '../projeto/envia.php' realmente está certo...

Outra dica muito importante, aperte F12 no chrome e vai em console... e veja o que aparece ali... Também podes verificar trocando o alert(callback) para console.log(callback). este último mostra no console o retorno da requisição para testes.

Luuuizmb · 2 de agosto de 2014

Comentei a linha que você falou e coloquei o alert. Não apareceu nada!

Fui no chrome, e apareceu isso:

Uncaught TypeError: Cannot call method 'appendChild' of undefinedUncaught SyntaxError: Unexpected token )

Ai vi o código estava passando um parentese e o retirei. Mesmo assim, nada aconteceu.

Coloquei o console.log e deu este erro:

Uncaught TypeError: Cannot call method 'appendChild' of undefined

Aguardo!

DiF · 2 de agosto de 2014

Sinceramente não sei. Pode ser erro de digitação em alguma coisa.

Teste desta maneira:

$(document).ready(function(){	$('form').submit(function(event) {		var valor = $('input[name=resposta]').val();				$.ajax({			type 		: 'POST', 			url 		: 'processa.php', 			data 		: {'resposta' : valor }, 			dataType 	: 'html',             		}).done(function(retorno) {				$("#status").html(retorno); 				});		event.preventDefault();	});});

Meus testes aqui funcionou a requisição

Luuuizmb · 2 de agosto de 2014

Bom, agora está melhorando! Sabe o teste que fiz acima? De só colocar echo "Teste". Deu certo! Quando envio algo no campo, a div status está recebendo.

Porém agora voltei à sintaxe alternativa que você me enviou, e dá o seguinte erro:

Parse error: syntax error, unexpected 'endwhile' (T_ENDWHILE) in C:\xampp\htdocs\projeto\envia.php on line 13

DiF · 2 de agosto de 2014

Esse erro é de sintaxe.

provavelmente é porque eu esqueci de fechar o primeiro if.. no exemplo:

Corrigido:

<?phpinclude "../projeto/conexao.php";$resposta = $_POST["resposta"];$rs = mysql_query("SELECT * FROM respostas WHERE cod_res = 1");while($dados = mysql_fetch_object($rs)):  if($resposta == $dados->resposta):      $atualiza = mysql_query("UPDATE equipes SET atual='2' WHERE cod_equi = 1");      if(atualiza):        echo "Resposta correta!";       else:        echo "ERRADO!";               endif;   endif;           endwhile;?>

Foi acrescentado o endif na linha 15. pois havia esquecido de fechar.

Luuuizmb · 3 de agosto de 2014

Com esta nova sintaxe não aparece nada na div status!

A esqueci, não está limpando o campo depois que eu clico no botão também.

DiF · 3 de agosto de 2014

Por gentileza, posta como tentou fazer, fora os meus exemplos.

Deve ter alguma coisa errada.. pois eu fiz um exemplo aqui e testei.

A sintaxe alternativa não difere em nada da convencional praticamente.. só consiste em eliminar os delimitadores de bloco com chaves.

por exemplo:

//IF convencionalif(condicção){   //faz alguma coisa}//IF alternativoif(condição):  //faz alguma coisaendif;//if convencional com elseif(condição){   //faz alguma coisa}else{   //faz alguma outra coisa}//if alternativo com elseif(condição):   //faz uma coisaelse:   //faz outra coisaendif;//laço de repetição for convencionalfor( expressão){   //faz alguma coisa}//laço de for alternativofor(expressão):  //faz alguma coisaendfor;//while convencionalwhile(expressão){   //faz alguma coisa}//while alternativowhile(expressão):  //faz alguma coisaendwhile;

Ainda existe uma terceira forma de fazer o IF que se chama " IF ternário" que consiste em fazer toda a verificação em uma única linha.

Só deve lembrar que o erro, não é por causa do uso da sintaxe alternativa.. se não aparece nada no status.. é porque tem algo errado ou no php ou no script jquery. como disse anteriormente, teste com o console do chrome.. utilizando o console.log() dentro da função done()... há possibilidade de os dados de alguma forma não estarem sendo passados ao php... verifique linha por linha meticulosamente.

eu fiz uns testes aqui e funcionaram exatamente como expliquei. só não testei a inserção no banco de dados.

Luuuizmb · 3 de agosto de 2014

O erro é com essa sintaxe alternativa sim! Olha como está:

<?phpinclude "../projeto/conexao.php";$resposta = $_POST["resposta"];$rs = mysql_query("SELECT * FROM respostas WHERE cod_res = 1");while($dados = mysql_fetch_object($rs)):  if($resposta == $dados->resposta):      $atualiza = mysql_query("UPDATE equipes SET atual='2' WHERE cod_equi = 1");      if($atualiza):        echo "Resposta correta!";      else:        echo "ERRADO!";               endif;  endif;           endwhile;?>

Porém tentei modificar para o código "sujo" que tinha criado e deu certo:

<?phpinclude "../projeto/conexao.php";$resposta = $_POST["resposta"];$sql_respostas = "SELECT * FROM respostas WHERE cod_res = 1";    $rs = mysql_query($sql_respostas);    while($dados = mysql_fetch_object($rs)){    $c = $dados->resposta;}    if($resposta == $c){                $sql = "UPDATE equipes SET atual='2' WHERE cod_equi = 1";                if(mysql_query($sql)){                    echo "<script>alert('Resposta correta!');window.location='c2.php';</script>";                    }    }else{        echo "ERRADO!";    }?>

Funcionou perfeitamente com o código sujo! Porém agora quero saber como deixá-lo limpo mas ao mesmo tempo funcional!

Além de como já citei, limpar o campo após o envio.

DiF · 3 de agosto de 2014

Continuo afirmando que o problema não é a sintaxe alternativa, você pode muito bem adaptar apenas a sintaxe e manter o jeito que estavas fazendo. como disse anteriormente a sintaxe alternativa consiste APENAS eliminar os delimitadores utilizado por chaves "{ }". de resto não muda nada.

veja:

<?php    include "../projeto/conexao.php";    $resposta = $_POST["resposta"];    $sql_respostas = "SELECT * FROM respostas WHERE cod_res = 1";    $rs = mysql_query($sql_respostas);    while($dados = mysql_fetch_object($rs)):      $c = $dados->resposta;    endwhile;    if($resposta == $c):       $sql = "UPDATE equipes SET atual='2' WHERE cod_equi = 1";       if(mysql_query($sql)):          echo "<script>alert('Resposta correta!');window.location='c2.php';</script>";        endif;       else:        echo "ERRADO!";    endif;

Veja que só do fato de eliminar as chaves.. você vê melhor o código

Sobre o campo que não zera... é só acrescentar dentro da função done() :