Modul de Newsletter cu AJAX
Una dintre cele mai simple aplicatii pentru Ajax este aceea de validare newsletter. Ajax permite incarcarea unor date din PHP fara a reincarca pagina curenta.
In prima faza vom avea nevoie de form-ul pentru inscriere.
<form action="#" name="newsletterForm" id="newsletterForm">
<input type="text" name="email" id="email" />
<input type="submit" name="Submit" value="Trimite" />
<span class="loader"><img src="images/loading_n.gif" alt="loading" /></span>
</form>
<div class="successBalloon"></div>
<div class="errorBalloon"></div>
<div class="resultText"></div>
In cadrul form-ului avem un care contine o mica animatie .gif. Dupa aceea mai avem 3 div-uri goale numite successBalloon, errorBalloon si resultText. Desigur, putem obtine aceeasi finalitate si cu un singur div, sau chiar fara nici unul, dar am detaliat pe cat posibil modulul pentru a putea explica ce se intampla. In div-urile success si error am definit in CSS ca fundal o imagine cu un X pentru eroare si una cu un Vazut pentru succes.
In partea de a documentului va trebui sa includeti libraria jQuery.
<script type="text/javascript" src="js/jquery.min.js"></script>
Acum sa ne ocupam putin de partea de PHP.
<?php
$email = $_POST['email'];
if ($email == "") {
echo 2;
} else {
echo 1;
}
?>
Deci daca variabila email este nula, atunci scriem 2. Daca are o anumita valoare, scriem 1. In tutorialele viitoare vom detalia si o serie de validari pentru e-mail.
Acum partea de Ajax care trebuie introdusa in .
<script type="text/javascript">
$(document).ready(function(){
var invalidMailError = "Adresa de e-mail este invalida.";
var successMessage = "Inscriere efectuata cu succes!";
$(".successBalloon").hide();
$(".errorBalloon").hide();
$(".resultText").hide();
$(".loader").hide();
$('form#newsletterForm').bind('submit', function(e){
$(".successBalloon").hide();
$(".errorBalloon").hide();
$(".resultText").hide();
$(".loader").show();
var email = $('input#email').val();
e.preventDefault();
$.ajax({
type: 'POST',
url: 'newsletter.php?email='+email,
data: '',
success: function(theResponse){
$(".resultText").fadeIn("slow");
$(".resultText").animate({opacity: 1.0}, 3000);
$(".resultText").fadeOut(1500);
if (theResponse == 1) {
$(".successBalloon").fadeIn("slow");
$(".successBalloon").animate({opacity: 1.0}, 3000);
$(".successBalloon").fadeOut(1500);
$(".resultText").html(successMessage);
}
if (theResponse == 2) {
$(".errorBalloon").fadeIn("slow");
$(".errorBalloon").animate({opacity: 1.0}, 3000);
$(".errorBalloon").fadeOut(1500);
$(".resultText").html(invalidMailError);
}
$(".loader").hide();
}
});
});
});
</script>
Acum sa explicam de ce si cum. Prima etapa este aceea de a defini elementele default ale pagini. Stabilim un mesaj pentru inscriere efectuata cu succes si unul pentru esuare si ascundem toate div-urile suplimentare. Functia .hide() ascunde din pagina orice element definit fie prin id, fie prin clasa.
var invalidMailError = "Adresa de e-mail este invalida.";
var successMessage = "Inscriere efectuata cu succes!";
$(".successBalloon").hide();
$(".errorBalloon").hide();
$(".resultText").hide();
$(".loader").hide();
Dupa aceea, cand butonul de submit al form-ului newsletterForm a fost apasat, vom aplica functia.
$('form#newsletterForm').bind('submit', function(e){
Este necesar sa ascundem cele 3 div-uri din nou pentru cazul in care cineva apasa de mai multe ori pe submit. Acum afisam div-ul loading (cel care continea acel .gif) pana cand vom primi raspunsul de la scrip-ul php. Tot aici formam si variabila email (preluam valoarea din campul de input cu id-ul email).
$(".successBalloon").hide();
$(".errorBalloon").hide();
$(".resultText").hide();
$(".loader").show();
var email = $('input#email').val();
Acum sa legam scrip-ul de php. Vom trimite variabila email pentri metoda POST.
$.ajax({
type: 'POST',
url: 'newsletter.php?email='+email,
In cazul in care totul decurge ok si variabila returnata de PHP este 1, afisam mesajul de succes. Altfel il afisam pe cel de eroare.
success: function(theResponse){
$(".resultText").fadeIn("slow");
$(".resultText").animate({opacity: 1.0}, 3000);
$(".resultText").fadeOut(1500);
if (theResponse == 1) {
$(".successBalloon").fadeIn("slow");
$(".successBalloon").animate({opacity: 1.0}, 3000);
$(".successBalloon").fadeOut(1500);
$(".resultText").html(successMessage);
}
if (theResponse == 2) {
$(".errorBalloon").fadeIn("slow");
$(".errorBalloon").animate({opacity: 1.0}, 3000);
$(".errorBalloon").fadeOut(1500);
$(".resultText").html(invalidMailError);
}
$(".loader").hide();
}
Animam casutele de raspuns astfel: definim metoda de aparitie si rapiditatea. Dupa aceea definim ce anume vrem sa animam. Dupa ce raspunsul va fi afisat timp de X ms, acesta va disparea.
$(".resultText").fadeIn("slow");
$(".resultText").animate({opacity: 1.0}, 3000);
$(".resultText").fadeOut(1500);
In final vom ascunde si casuta de loading pentru ca deja am primit raspunsul de la PHP.
$(".loader").hide();
Cam asta ar fi tot pentru inceput, daca nu va descurcati nu ezitati sa postati aici.
C’ya next time!
Ti-a placut articolul Modul de Newsletter cu AJAX?
TweetAi nevoie de rezolvarea unei probleme la informatica?
Iti recomandam si urmatoarele articole:
Discuta articolul Modul de Newsletter cu AJAX
Contul tau
Categorii
- Atestat Info C/C++ (21)
- Atestat Info Pascal (21)
- Learn AJAX (3)
- Learn Android (5)
- Learn C++ (32)
- Learn CSS (11)
- Learn Database (9)
- Learn Flash (33)
- Learn HTML (14)
- Learn JAVA (9)
- Learn Javascript (14)
- Learn jQuery (17)
- Learn Pascal (28)
- Learn PHP (21)
- Learn SQL (5)
- Learn Visual FoxPro (4)
- Tips & Tricks (22)
Mozku Network
Ne gasesti si pe Facebook
Articole noi
- Cum sa detectati rezolutia telefonului intr-o aplicatie Android
- Cum se evita oprirea fortata a unei aplicatii
- Cum sa porniti o activitate noua in Android
- Cum sa adaugati un ImageView intr-o aplicatie Android
- Cum sa adaugati un Button intr-o aplicatie Android
- Cum sa utilizati un ArrayList in Java
- Bifeaza toate checkbox-urile folosind jQuery
- Validare formular folosind jQuery
Fisiere populare
- Proiect Atestat Informatica Visual FoxPro (439)
- Twitter Patterns (202)
- Flash Newsletter (126)
- hitTest Flash (99)
- Baza de date auto revizuita (98)
