Een Ajax form + mooie effecten met jQuery

This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

  • bramieboy100

    Inleiding
    In deze blog wil ik jullie graag leren om makkelijk een Ajax form te maken met mooie effecten. Ook komen er een paar tips&trucks in voor. Ik neem wel aan dat u verstand van HTML(5) hebt met een beetje verstand van jQuery en uw eigen HTML form kan maken.

    De Ajax
    U kunt pure Ajax gebruiken maar dit is te omslachtig, jQuery heeft een veel overzichtelijker en makkelijkere vorm. Daarom moeten we eerst jQuery 'includen' in onze HTML(5) pagina. Dit doe je op de volgende manier:

    Source Code

    1. <script type="text/JavaScript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

    Of via Google:

    Source Code

    1. <script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    Daarna include je ook onze js (Javascript) file (in het voorbeeld staat ajax.js in de js map).

    Source Code

    1. <script type="text/JavaScript" src="js/ajax.js"></script>


    Goed nu kunnen we aan de slag met ajax.js.

    Source Code

    1. $(document).ready(function () { //Zorgt ervoor dat alles pas werkt als de pagina geladen is
    2. $('#submit').click(function () { //Geef de een button een id (hierbij submit) waarbij de button geen submit type is. Als u hierop klikt komt er een reactie.
    3. $('#form').slideUp(); //De HTML form heeft de id form en deze laat je nu inschuiven met de functie .slideUp . Dit is een mooie effect van jQuery
    4. $('#ajax-loader').slideDown(); //Hier schuift de Ajax lader uit. http://www.ajaxload.info/ hier kun je gratis er een laten maken
    5. $.post("ajax_post.php", //Dit is de ajax met de functie .post (zorgt ervoor dat je het in PHP met $_POST kunt oproepen
    6. $("#form").serialize(), //De form wordt naar ajax_post.php gestuurd, u kunt deze oproepen met $_POST['element_content_van_name']
    7. function (data) { //De variabele data kun je gebruiken om de respons terug te krijgen van het PHP gedeelte
    8. if (data === '0') { //PHP script geeft de string '0' als respons als alles goed is gegaan
    9. $(".ajax-loader").slideUp();
    10. $("#succes").slideDown();
    11. //Zet hier verdere acties
    12. } else {
    13. $(".ajax-loader").slideUp();
    14. $("#form").slideDown();
    15. $("#fout").slideDown();
    16. }
    17. }
    18. });
    19. });
    20. });
    Display All


    Het PHP gedeelte

    PHP Source Code

    1. <?php
    2. $naam = htmlentities($_POST['naam']); //De functie htmlentities is alleen nodig als je het later weer in een webpagina wil laten weergeven (beveiliging tegen XSS)
    3. $wachtwoord = hash("SHA512", $_POST['wachtwoord']); //Wordt nu gehashed met SHA512
    5. if (!empty($naam) && !empty($wachtwoord)) {
    6. echo '0';
    7. } else {
    8. echo '1';
    9. }
    10. ?>

    Eigenlijk is de PHP precies hetzelfde als het een normale form was.

    Tips & Trucks
    1. Wil je nu meerdere responses met meerdere acties kun je gewoon elseif in PHP en else if (met spatie ja) gebruiken voor de JS.
    2. Je kunt zo ook sessies op afstand maken (in een PHP script) en destroyen (voor uitloggen met session_destroy())
    3. Gebruik:

    Source Code

    1. $(document).keypress(function (e) {
    2. if (e.which == 13) {
    3. //Hier acties
    4. }
    5. });

    Om iets te activeren met de knop enter.
    LOL

    1,173 times read

Comments 4

  • bramieboy100 -

    Daar heb je gelijk in, ik ga het even aanpassen.

  • victor -

    Ik ben van mening dat als je iets laat zien, je moet proberen dat ook zo goed mogelijk te laten zijn. Natuurlijk is niet iedereen perfect.. daar zijn we mensen voor, maar waarom slechte(re) code geven als het makkelijk goed kan?

    Verder een leuke en handige tutorial natuurlijk! :)

  • bramieboy100 -

    Het is niet echt een uitleg over de PHP maar over de JavaScript. De PHP is erg snel gemaakt zodat je kon zien hoe je de variabelen kon opvragen. Ik neem ook aan dat degene die het gebruikt zelf voor de beveiliging zorgt. Verder is htmlspecialchars niet nodig zoland je het niet weer toont op een HTML pagina en dan kun je ook nog htmlentities gebruiken en dat dekt nog meer en voor wachtwoord kun je beter hash() gebruiken.

    Dit is niet afkrakend bedoeld. Alsnog bedankt voor uw reactie.

  • victor -

    Ben zelf niet zo goed met javascript, maar heb wel een opmerking over je php. Je stopt de userinput direct in een variabele. Onbeveiligd dus.

    Ik zou over de naam even htmlspecialchars() doen en over het wachtwoord bijvoorbeeld een sha1 met salt. ;)