Fernando Softov » ajax http://www.softov.com.br/blog Só mais um blog do WordPress Wed, 01 Sep 2010 04:41:42 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Jquery + Ajax + PHP http://www.softov.com.br/blog/post/93/jquery-ajax-php http://www.softov.com.br/blog/post/93/jquery-ajax-php#comments Thu, 10 Sep 2009 20:06:25 +0000 fernandosoftov http://www.softov.com.br/blog/?p=93 No post  – Jquery, introdução – anterior a este falei um pouco sobre Jquery, como o titulo diz, uma breve introdução, hoje falarei sobre o uso de jQuery + Ajax + PHP.

Em breve exemplo usarei o envio de formulário, deixarei a validação do mesmo para um post posterior.

Primeiramente acesse este link http://docs.jquery.com/Downloading_jQuery, e faça o download da versão mais recente da JQuery.

Seguindo a estrutura html básica


<!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>Ajax Post - Erick Alves</title>
<script src="js/jquery-1.3.2.min.js" type="text/javascript" language="javascript"></script>

</head>

<body>
<form action="#" method="post">
<label>Nome: <input type="text" name="nome" id="nome" /></label>
<label>Email: <input type="text" name="email" id="email" /></label>
<label>Telefone: <input type="text" name="telefone" id="telefone" /></label>
<input type="button" value="Enviar" id="enviar" />
</form>
<div id="resposta"></div>
</body>
</html>

Neste html eu criei um formulario com os campos, nome, email e telefone,  respectivamente cada um com seu id, para utilizarmos eles no jQuery.

Entres as tags <head></head> eu inseri o jQuery


<script src="js/jquery-1.3.2.min.js" type="text/javascript" language="javascript"></script>

Depois disso criaremos uma página chamada de enviar.php com a seguinte estrutura


<?php
// recebo os campos via $_POST[''];
$nome = $_POST['nome'];
$email = $_POST['email'];
$telefone = $_POST['telefone'];

// verifico se estão preenchidos
if (!($nome) || !($email) || !($telefone)){
     echo 'Preencha todos os campos!';
     exit();
}
//Abrindo Conexao com o banco de dados
$conexao = mysql_pconnect("localhost","usuario","senha") or die (mysql_error());
$banco = mysql_select_db("bancodedados");

//Utilizando o  mysql_real_escape_string voce se protege o seu código contra SQL Injection.
$nome = mysql_real_escape_string($nome);
$email = mysql_real_escape_string($email);
$telefone = mysql_real_escape_string($telefone);

$insert = mysql_query("insert into contatos (nome,email,telefone) values ('{$nome}','{$email}','{$telefone}')");
mysql_close($conexao);
if($insert) {
     echo 'Cadastro Realizado!';
}else {
     echo 'Erro ao Cadastrar!';
}
?>

O exemplo acima está auto comentado e de fácil entendimento.

E agora? O formulario não vai funcionar pois não estamos setando nenhum action nele. Isso é importante para o funcionamento dele via jQuery.

Utilizaremos agora a função click do jQuery, instanciando o elemento de id “enviar“, no caso do formulario html o botão de envio.

Receberemos os valores dos campos de id:

  • nome
  • email
  • telefone

Feito isso, teremos a função post do jQuery, requisitando dados no envia.php e passando como paramentro nossos campos.

Instanciamos o elemento de id “resposta” para receber o retorno do nosso ajax.

Tudo isso é feito utilizando o script jQuery abaixo

<script type="text/javascript">
$(document).ready(function() {
    $("#enviar").click(function() {
       var nome = $("#nome");
       var nomePost = nome.val();
       var email = $("#email");
       var emailPost = email.val();
       var telefone = $("#telefone");
       var telefonePost = telefone.val();
       $.post("enviar.php", {nome: nomePost, email: emailPost, telefone: telefonePost},
       function(data){
          $("#resposta").html(data);
       }
       , "html");
     });
});
</script>

Que deve ser inserido entre as tags head do seu html.

Fim…

Temos também no jQuery outros modos de enviar requisições ajax, como a própria funçao $.ajax().

Mas deixarei isso para outro post, assim como as validações.

Bem isso é tudo pessoal.

]]> http://www.softov.com.br/blog/post/93/jquery-ajax-php/feed 0