{"id":93,"date":"2009-09-10T17:06:25","date_gmt":"2009-09-10T17:06:25","guid":{"rendered":"http:\/\/www.softov.com.br\/blog\/?p=93"},"modified":"2019-02-02T01:44:34","modified_gmt":"2019-02-02T01:44:34","slug":"jquery-ajax-php","status":"publish","type":"post","link":"https:\/\/softov.com.br\/blog\/2009\/09\/10\/jquery-ajax-php\/","title":{"rendered":"Jquery + Ajax + PHP"},"content":{"rendered":"

No post\u00a0 – Jquery, introdu\u00e7\u00e3o<\/a> – anterior a este falei um pouco sobre Jquery, como o titulo diz, uma breve introdu\u00e7\u00e3o, hoje falarei sobre o uso de jQuery + Ajax + PHP.<\/p>\n

Em breve exemplo usarei o envio de formul\u00e1rio, deixarei a valida\u00e7\u00e3o do mesmo para um post posterior.<\/p>\n

Primeiramente acesse este link http:\/\/docs.jquery.com\/Downloading_jQuery<\/a>, e fa\u00e7a o download da vers\u00e3o mais recente da JQuery.<\/p>\n

Seguindo a estrutura html b\u00e1sica<\/p>\n

[code language=”html”]<\/p>\n

<!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN" "http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd">
\n<html xmlns="http:\/\/www.w3.org\/1999\/xhtml">
\n<head>
\n<meta http-equiv="Content-Type" content="text\/html; charset=utf-8" \/>
\n<title>Ajax Post – Erick Alves<\/title>
\n<script src="js\/jquery-1.3.2.min.js" type="text\/javascript" language="javascript"><\/script><\/p>\n

<\/head><\/p>\n

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

[\/code]<\/p>\n

Neste html eu criei um formulario com os campos, nome, email e telefone,\u00a0 respectivamente cada um com seu id, para utilizarmos eles no jQuery.<\/p>\n

Entres as tags <head><\/head> eu inseri o jQuery<\/p>\n

[code language=”html”]<\/p>\n

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

[\/code]<\/p>\n

Depois disso criaremos uma p\u00e1gina chamada de enviar.php com a seguinte estrutura<\/p>\n

[code language=”php”]<\/p>\n

<?php
\n\/\/ recebo os campos via $_POST[”];
\n$nome = $_POST[‘nome’];
\n$email = $_POST[‘email’];
\n$telefone = $_POST[‘telefone’];<\/p>\n

\/\/ verifico se est\u00e3o preenchidos
\nif (!($nome) || !($email) || !($telefone)){
\n echo ‘Preencha todos os campos!’;
\n exit();
\n}
\n\/\/Abrindo Conexao com o banco de dados
\n$conexao = mysql_pconnect("localhost","usuario","senha") or die (mysql_error());
\n$banco = mysql_select_db("bancodedados");<\/p>\n

\/\/Utilizando o\u00a0 mysql_real_escape_string voce se protege o seu c\u00f3digo contra SQL Injection.
\n$nome = mysql_real_escape_string($nome);
\n$email = mysql_real_escape_string($email);
\n$telefone = mysql_real_escape_string($telefone);<\/p>\n

$insert = mysql_query("insert into contatos (nome,email,telefone) values (‘{$nome}’,'{$email}’,'{$telefone}’)");
\nmysql_close($conexao);
\nif($insert) {
\n echo ‘Cadastro Realizado!’;
\n}else {
\n echo ‘Erro ao Cadastrar!’;
\n}
\n?><\/p>\n

[\/code]<\/p>\n

O exemplo acima est\u00e1 auto comentado e de f\u00e1cil entendimento.<\/p>\n

E agora? O formulario n\u00e3o vai funcionar pois n\u00e3o estamos setando nenhum action nele. Isso \u00e9 importante para o funcionamento dele via jQuery.<\/p>\n

Utilizaremos agora a fun\u00e7\u00e3o click <\/strong><\/em>do jQuery, instanciando o elemento de id “enviar<\/strong>“, no caso do formulario html o bot\u00e3o de envio.<\/p>\n

Receberemos os valores dos campos de id:<\/p>\n