כיצד ליצור טופס משלך אייאקס צור

27 אוקטובר 2008 על ידי פיליפ בל · 6 תגובות




Ajax (Asynchronous Javascript ו-XML) הפך לכלי מאוד פופולרי עיצוב אתרים. הדרכה זו ילמד אותך איך לעשות טופס יצירת קשר באמצעות PHP ו-AJAX Jquery. לראות את הקוד בפעולה כאן.

שלב 1 - HTML

כדי להפעיל את הדברים מאפשר ליצור קובץ חדש ולקרוא את זה contact.html, בתוכו אנו רוצים ליצור טופס HTML פשוט, כך: 

 <div class="loader"> </ span> <div class="bar"> </ span> <div id="container"> <טופס id = "contactForm" שיטה = "" פעולה = "mail.php" > <p> <Label for="name"> שם </ label> <input id="name" name="name" /> </ p> <Label for="email"> דואר אלקטרוני < / label> <input id="email" name="email" /> </ p> <Label for="message"> <תוכן ההודעה / label> <Textarea id = שם "הודעה" = "הודעה" שורות = "4" עמודות = "30"> </ Textarea> </ p> <input class="submit" type="submit" value="submit"/> </ p> </ form> < / p>

כעת יש לנו טופס יצירת קשר סטנדרטי אשר יגיש mail.php

שלב 2 - PHP

עכשיו אנחנו רוצים ליצור קובץ php בשם mail.php זה יטפל את תוצאות הטופס שלנו. 

  <? Php
 / / להצהיר על משתנים שלנו
 $ = $ _GET שם ['name'];
 $ = $ _GET הדוא"ל ['דוא"ל'];
 $ = $ _GET תגובה ['תגובה'];
 / / לקבל את התאריך של היום
 $ Todayis = התאריך ("אני, F j, Y, g: IA");
 / / להגדיר כותרת עבור ההודעה
 הנושא $ = "הודעה";
 $ Message = "ההודעה: תגובה $ \ r \ n מ: $ שם \ r \ n תגובה ל: $ מייל";

 / / לשים את כתובת הדוא"ל שלך כאן
 דואר (" [דוא"ל מוגן]   ", $ כפוף, הודעת $);
 ?>
 <- הצג הודעה תודה על התקשרות ->
 <h1> <span> תודה <h10> <? php echo $ שם?> </ H10> </ span> </ h1>
 <p>
   <span> ההודעה שלך ייענו בהקדם האפשרי. </ span>
 </ P>
 הודעה <h3> נשלח: </ h3>
 <p>
   <span> <? php echo $ todayis?> </ span>
 </ P>

בדף זה אנו ליצור כמה משתנים, אשר מתכנסים שם, דוא"ל הודעה הטופס, ואז בעזרת PHP אלקטרוני () פונקציה זו היא תשלח לכתובת הדוא"ל שצוין. למען במדריך זה השתמשתי [דוא"ל מוגן] , אבל אתה יכול להשתמש כל מה שאתה רוצה.

לאחר כל זה ביצעה אנו יציג להודות לך הודעה. באמצעות חלק מהמידע שאספנו.

שלב 3 - JQuery

עכשיו מגיע החלק חכם. כדי להתחיל אנו צריכים לכלול את המסגרת jQuery. אתה יכול להוריד את זה מ -jQuery באתר, ולאחר מכן לצרף אותו כמו אז. 

  <script type="text/javascript" src="yourDirectory/jquery.js">

Jquery היא מסגרת javascript שנוצרו כדי להפוך את החיים הרבה יותר קל, אם הזמן שלך שלה הראשון באמצעות זה, לבדוק את 15 ימי Jquery . אנחנו רוצים ליצור פונקציה לשלוח את הטופס שלנו בלי לקחת אותנו לדף אחר. אנחנו יכולים לעשות את זה ככה. 

  / / לעסוק על לטעון את הדף
 $ (פונקציה () {
   / / על ההדק ajax להגיש
   $ ('# ContactForm'). להגיש (פונקציה () {

     / / להסתיר את הטופס
     $ ('# ContactForm') להסתיר ().

     / / להציג את סרגל הטעינה
     . $ ('. מטעין') לצרף ($('. בר "));
     $ ('בר'.) Css ({display: "לחסום"}).

     / / לשלוח את הבקשה ajax
     $. Get ("mail.php", {:$('# שם שם "). Val (),
                      בדוא"ל כתובת הדוא"ל :$('# '). val (),
                      תגובה הודעה :$('# '). val ()},

     / / להחזיר את הנתונים
     הפונקציה (נתונים) {
       / / להסתיר את הגרפיקה
       . $ ('. בר ") css ({display:" לא כלום "});
       $ ('מטעין. ") לצרף (נתונים).
     });

   / / להישאר על הדף
   בתמורה שווא;
   });
 });

קוד זה יפעילו אירוע כאשר הטופס נשלח, אשר יהיה להסתיר את הטופס ולהציג פס טעינה. $. להשיג () הוא קו שעושה את השיחה ajax כדי mail.php אשר שולחת את פרטי טופס באמצעות שיטת GET. לאחר ajax הצליחה התוצאה לאחר מכן ניתן יהיה מוצג על המסך. זה מזריק את התוכן של mail.php לדף contact.html.

שלב 4 - CSS

השלב האחרון הוא להוסיף קצת סגנון CSS לטופס כדי לוודא שאנחנו יכולים להציג ולהסתיר את הדברים בצורה נכונה. לא שלה neccesity, אבל זה עושה את זה נראה נקי יותר. 

  הגוף {
   גופן משפחתי: Helvetica;
 }

 . מטעין {

 }

 . בר {
   display: none;
   רקע: url ('ajax-loader.gif') לא חוזר;
   margin-left: 20px;
   margin-top: 50px;
   גובה: 20px;
   רוחב: 230px;
 }

 # ContactForm {
   לצוף: עזבו;
   position: relative;
   צבע הרקע: # fdfdfd;
   גובה: 200px;
 }

 # מיכל {
   padding: 20px;
   לצוף: עזבו;
   position: relative;
   גובה: 200px;
   רוחב: 100px;
 }

שלב 5 - לשים את זה ביחד

אם תשים את כל הקוד ביחד contact.html שלכם אמור להיראות כך. 

 <html> <head> <script type="text/javascript" src="../jquery.js"> </ script> <script type="text/javascript"> / / לעסוק על לטעון את הדף $ (פונקציה . () {/ / על ההדק ajax להגיש $ ('# contactForm') להגיש (function () {/ / להסתיר את הטופס $ ('# contactForm') להסתיר ();. / / להציג את סרגל הטעינה $ ('. . מטעין "). לצרף ($('. בר")); $ ('. בר ") css ({display:" לחסום "}.); / / לשלוח את הבקשה לקבל ajax $ (' mail.php", {:$('# שמו שם "). val (), בדוא"ל כתובת הדוא"ל :$('# '). val (), תגובה הודעה :$('#'). val ()}, / / ​​להחזיר את הפונקציה נתונים (נתונים) {/ / להסתיר את $ גרפי ("בר"). css ({display: "לא כלום"}).. $ ('. מטעין') לצרף (נתונים);}); / / להישאר על הדף בתמורה שווא;});}); </ script> <style type="text/css"> הגוף {גופן משפחתי:.. Helvetica;}} {מטעין בר {display: none; רקע: url ('ajax- loader.gif ') לא חוזר; margin-left: 20px; margin-top: 50px; גובה: 20px; רוחב: 230px;} # contactForm {float: עזבו; position: relative; צבע הרקע: # fdfdfd: גובה: 200px;} # מיכל {padding: 20px; לצוף: עזבו; position: relative; גובה: 200px; רוחב: 100px;} </ style> </ head> <body> <div class="loader"> </ p> <div class="bar"> </ span> <div id="container"> <form id="contactForm" method="" action="mail.php"> <Label <p> for="name"> שם </ label> <input id="name" name="name" /> </ p> <Label for="email"> דואר אלקטרוני </ label> <id = שם קלט "דוא"ל" = "דואר אלקטרוני" /> </ p <p>> <Label for="message"> תוכן ההודעה </ label> <textarea id="message" name="message" rows="4" cols="30"> < / Textarea> </ p> <input class="submit" type="submit" value="submit"/> </ p> </ form> </ span> </ body> </ html>

אז רק באמצעות 2 קבצים יצרנו עצמו מאוד טופס חזק שלך ajax conatct. שלה פשוט כך. הורד את הקוד ולנסות את זה בעצמך.

תגובות

6 תגובות ל "כיצד ליצור טופס צור משלך אייאקס"
  1. אנתיאה - אומר:
    28 אוקטובר 2008 בשעה 00:27

    השלב הבא הוא להוסיף איזשהו אימות, כמו שדה אחרת מאמת מבוסס על השאלה שאתה שואל את המשתמש.

    הדרכה Sweet & פשוטה בצורה מאוד בסיסית ...

  2. Monkeytail - אומר:
    28 אוקטובר 2008 בשעה 12:09

    השיטה attr טופס יש ערך של פוסט .. vars הגלובלית בשימוש בקובץ php הם $ _GET .. למה?

  3. פיליפ בל - http:// אומר:
    28 אוקטובר 2008 בשעה 12:58

    Monkeytail היי, הנה אנחנו באמצעות פונקציה להגיש, אשר תופס את הטופס לפני שהוא הולך לשום מקום, אז בהודעה הוא התעלם, אבל אני יכולה להבין למה זה ייראה מבלבל. $. להשיג () מציין שיטה של ​​GET כאשר הבקשה ajax הוא ירה, ובכך אנו משתמשים var $ _GET העולמי ב mail.php כדי ללכוד את המידע. תודה על השאלה

  4. Synthe - אומר:
    28 אוקטובר 2008 בשעה 03:54

    אם מישהו רוצה להשתמש ב-PHP $ HTTP_POST_VARS שלהם את הקוד jQuery תהיה:

    $. Ajax ({
    סוג: "פוסט",
    כתובת האתר: "mail.php",
    נתונים:. "name = '+ $ (' # שם") val () +
    "& Email = '+ $ (' # דוא"ל"). Val () +
    "& Comment = '+ $ (' הודעה #"). Val ()},
    הצלחה: פונקציה (נתונים) {
    . $ ('. בר ") css ({display:" לא כלום "});
    $ ('מטעין. ") לצרף (נתונים).
    בתמורה שווא;
    }
    });

    באמצעות הודעה יעזוב אפשרות שחזור אם מישהו הפך את javascript והם לוחצים להגיש (בתמורה שווא לא יעבור את הפעולה בצורה יתמודד). אתה גם צריך לשנות את שיטת הטופס לתגובה.

  5. ashvin - http://www.islanzilla.com אומר:
    30 אוקטובר 2008 בשעה 17:57

    Theres טעות הקלדה:
    "
    שלב 2 - PHP

    <? Php
    / / להצהיר על משתנים שלנו
    $ = $ _GET שם ['name'];
    $ = $ _GET הדוא"ל ['דוא"ל'];
    $ = $ _GET הודעה ['תגובה'];
    "

    $ המסר צריך להיות $ תגובה.

    ניס נו. Thanx.

  6. keco - אומר:
    6 נובמבר 2008 בשעה 06:12

    היי ... תודה לך. ההודעה שלך לפתור את הבעיה שלי עם jQuery.

מדריך בלוג