Enviando e recebendo dados via AJAX usando jQuery e PHP

Muita gente tem receio de mexer com AJAX achando que se trata de um bicho-de-sete-cabeças, digamos que trabalhar com ele seja algo semelhante a andar de bicicleta, tem que perder o medo para começar a sair do lugar. No final você vai perceber que não é algo tão complicado assim.

De um jeito ou de outro você se você pretende ser um desenvolvedor Web, não vai conseguir fugir do AJAX por muito tempo, pois é impossível dissociar a Internet moderna da tecnologia AJAX.

Bem, para inicio de conversa eu confesso que tenho o defeito de ser extremamente pratico, tem um monte de tutorial por ai ensinado o passo a passo sobre XMLHttpRequest, mas se alguém já inventou a roda, porque fingir que ela não existe?

jQuery – Write less, do more…

O jQuery é uma biblioteca JavaScript que simplifica enormemente o desenvolvimento de aplicações web, seja para manipular eventos, criar animações ou é claro criar aplicações AJAX..
O jQuery é projetado para mudar a maneira que você escreve ou precisa escrever JavaScript, a biblioteca é usada por nada menos que 41% dos 10 mil sites mais visitados do mundo, tem o código aberto e pode ser usada gratuitamente por qualquer pessoa.

Agora vamos ao que realmente interessa, aqui esta um script completo usando jQuery para pegar os dados de um formulário, fazer a validação, enviar para um servidor e receber a resposta remota, tudo via AJAX, fique a vontade para copiar, adaptar ou melhorar o código de acordo com sua necessidade.

Lado Cliente:

<html>
<head>
<script type="text/javascript" src='jquery.min.js'></script>
</head>
<body>
<h3>Deixe sua Messagem</h3>
 
<div style="height:350px; display: block;" id="to-email">
<form id="mailto" action="">
<div id="errors"></div>
<div style="width:260px; float:left;" >
<b>Seu nome:</b>
<br><input type="text" name="name" id="name" size="36" maxlength="50"><br>
<b>Seu e-mail:</b>
<br><input type="text" name="email" id="email" size="36" maxlength="70"><br>
</div>
<div style="width:150px;float:left;">
<b>Mensagem:</b>
<br><textarea name="message" id="message" cols="50" rows="5"></textarea><br>
<input type="submit" value="Enviar" name="submit">
</div>
</form>
</div>
<script type="text/javascript">
$("#mailto").submit(function() {
/* A função .submit do jQuary é chamada automaticamente
no momento em que os dados do formulário são enviados.
as strings depois do "#" são os id dos campos */
var name = $('#name').val();
var email = $('#email').val();
var message = $('#message').val();
 
if (name == '') {
$('#errors').html('Digite seu nome corretamente.').show(); return false;
// O .html manipula dinamicamente o conteúdo HTML da div errors
} else if (email == '' || !checkMail(email)) {
$('#errors').html('Preencha o seu e-mail!').show(); return false;
}
 
$('#errors').html('Enviando, por favor aguarde...').show();
/* A função .post, como próprio nome sugere, envia os dados para o servidor,
logo abaixo a função data trás de retorno os dados de saída do servidor, neste caso
vamos simplesmente exibir um alerta com essa resposta */
$.post("input.php",
{name: name, email: email,message: message, titulo: titulo, link: link},
function(data) {
alert(data);
$('#name').val('');
$('#email').val('');
$('#message').val('');
});
return false;
});
//Função de validação de email...
function checkMail(mail) {
var er = new RegExp(/^[A-Za-z0-9_-.]+@[A-Za-z0-9_-.]{2,}.[A-Za-z0-9]{2,}(.[A-Za-z0-9])?/);
return er.test(mail);
}
</script>
</body>
</html>

Lado Servidor:

<?php
$to = "[email protected]";
$subject = "Fale Conosco - Rotina Digital";
function validate_form_items()
{
  $form_items = array(
  "name"  => array(
  "regex" => "/^([a-zA-Z 0-9.'-]+)$/",
  "error" => "Por favor, digite seu nome correto.",
  ),
"email" => array(
  "regex" =>
"/^[A-Za-z0-9](([_.-]?[a-zA-Z0-9]+)*)@([A-Za-z0-9]+)(([.-]?[a-zA-Z0-9]+)*).([A-Za-z]{2,})$/",
  "error" => "Por favor, digite um e-mail v&aacute;lido.",
  ),
  "message" => array(
  "regex" => "^$",
  "error" => "Esque&ccedil;eu sua mensagem?.",
  ),
  );
  $errors = array();
  foreach($form_items as $item_name => $item_props)
  {
  if (!preg_match($item_props["regex"], trim($_POST[$item_name])))
  {
  $errors[] = $item_props["error"];
  }
  }
  return $errors;
}
function email($from, $to, $subject, $message)
{
$headers = "From: ".$from."rn";
$headers .= "Reply-To: ".$from."rn";
$headers .= "Return-Path: ".$from."rn";
 
if (mail($to,$subject,$message,$headers) ) {
echo 'Prezado '.$_POST['name'].",<br>Obrigado pelo seu contato, sua mensagem foi recebida. <br>Responderemos o mais brevemente poss&iacute;vel.";
} else {
echo "Sua mensagem n&atilde;o p&ocirc;de ser enviada neste momento. Por favor, tente novamente mais tarde.";
}
}
function print_error($errors)
{
foreach($errors as $error)
{
echo $error."<br>";
}
}
function form_process()
{
global $to, $subject;
$errors = validate_form_items();
if(count($errors) == 0)
{
$errors [] = email(trim($_POST["email"]), $to, $subject, utf8_encode($_POST["message"]));
}
print_error($errors);
}
form_process();
?>

Gostou dessa matéria?

Inscreva seu email para receber atualizações com as últimas publicações do nosso blog.

[jetpack_subscription_form show_subscribers_total="false" button_on_newline="false" custom_font_size="16px" custom_border_radius="0" custom_border_weight="1" custom_padding="15" custom_spacing="10" submit_button_classes="" email_field_classes="" show_only_email_and_button="true" success_message="Sucesso! Enviamos um e-mail para confirmar a sua assinatura. Encontre o e-mail agora e clique em 'Confirmar' para iniciar a inscrição."]