איך ליצור את אייאקס שלך טופס יצירת קשר

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

שלב 1 - קוד ה-HTML

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

  class="loader"> <div </ div>
 class="bar"> <div </ div>
 <div id="container">
   <form id="contactForm" method="" action="mail.php">
   <p>
     <Label for="name"> שם </ label>
     <input id="name" name="name" />
   </ p>
   <p>
     <Label for="email"> דואר אלקטרוני </ label>
     <input id="email" name="email" />
   </ p>
   <p>
     <Label for="message"> הודעה </ התווית שלך>
     <textarea id="message" name="message" rows="4" cols="30"> </ textarea>
   </ p>
   <p>
     <input class="submit" type="submit" value="submit"/>
   </ p>
   </ form>
 </ div> 

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

שלב 2 - PHP

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

  <? PHP
 / / מכריזים על משתנים שלנו
 שם $ = $ HTTP_GET_VARS [ 'name'];
 $ email = $ HTTP_GET_VARS [ '];
 הערה $ = $ HTTP_GET_VARS [ 'comment'];
 / / את התאריך של היום
 $ todayis = התאריך ( "l, F j, Y, g: ia");
 / / הגדרת כותרת עבור ההודעה
 $ subject = "הודעה";
 הודעת $ = "הודעה: $ תגובה \ r \ n מאת: שם $ \ r \ n השב: $ Email";

 / / את כתובת הדוא"ל שלך כאן
 (דואר "email@address.com", הודעה בנושא $, $);
 ?>
 <! - הצגת הודעה Thankyou ב callback ->
 <h1> <span> תודה <h10> <? php echo $ שם?> </ H10> </ span> </ h1>
 <p>
   <span> ההודעה ייענו בהקדם האפשרי. </ span>
 </ p>
 <h3> ההודעה נשלחה ב: </ h3>
 <p>
   <span> <? php echo $ todayis?> </ span>
 </ p> 

בדף זה אנו ליצור כמה משתנים, אשר אוספים את השם, הודעת דוא"ל מהטופס, ואז באמצעות הדואר PHP () function זה ישלח את זה לכתובת הדוא"ל שצוינה. למען זה אני צריך הדרכה בשימוש email@example.com, אבל אתה יכול להשתמש כל מה שאתה רוצה.

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

שלב 3 - jQuery

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

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

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

  / / לעסוק ב לטעון את הדף
 $ (function () (
   / / AJAX להגיש על ההדק
   $ ( '# contactForm'). להגיש (function () (

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

     / / להציג את סרגל הטעינה
     $ ( '. מטעין'). לצרף ($('. בר '));
     $ ( '. הבר'). CSS ((display: 'בלוק'));

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

     / / להחזיר את הנתונים
     נתונים function () (
       / / להסתיר את הגרפיקה
       $ ( '. הבר'). CSS ((display: 'none'));
       $ ( '. מטעין'). לצרף (נתונים);
     ));

   / / להישאר בדף
   return false;
   ));
 )); 

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

שלב 4 - את ה-CSS

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

  הגוף (
   font-family: helvetica;
 )

 . מטעין (

 )

 . בר (
   display: none;
   background: url ( "ajax-loader.gif ') no-repeat;
   margin-left: 20px;
   margin-top: 50px;
   height: 20px;
   רוחב: 230px;
 )

 # contactForm (
   float: left;
   position: relative;
   צבע רקע: # fdfdfd;
   גובה: 200px;
 )

 מיכל # (
   padding: 20px;
   float: left;
   position: relative;
   גובה: 200px;
   width: 100px;
 ) 

שלב 5 - לחבר הכול

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

 <html> <head> type="text/javascript" <script src="../jquery.js"> </ script> <script type="text/javascript"> / / לעסוק ב לטעון את דף $ (פונקציה () (/ / AJAX על ההדק להגיש $ ( '# contactForm'). להגיש (function () (/ / להסתיר את הטופס $ ( '# contactForm'). Hide (); / / להציג את סרגל הטעינה $ ( '. מטעין '). לצרף ($('. בר')); $ ( '. הבר'). CSS ((display: 'בלוק')); / / לשלוח את הבקשה AJAX $. לקבל ( 'mail.php', (שם שם :$('# '). Val (), דוא"ל :$('# דוא"ל "). Val (), תגובה הודעה :$('#'). val ()), / / להחזיר את הנתונים בפונקציה (נתונים) (/ / להסתיר את הגרפיקה $ ( '. הבר'). CSS ((display: 'none')); $ ( '. מטעין'). לצרף (נתונים);)); / / להישאר בדף return false;));)); </ script> <style type="text/css"> body (font-family: Helvetica;). מטעין (). הבר (display: none; background: url ( "ajax - loader.gif ') לא לחזור-; margin-left: 20px; margin-top: 50px; height: 20px; רוחב: 230px;) # contactForm (float: left; position: relative; background-color: # fdfdfd; גובה: 200px;) (מיכל # padding: 20px; float: left; position: relative; גובה: 200px; width: 100px;) </ style> </ head> <body> <div class="loader"> </ div> class="bar"> <div </ div> <div id="container"> <form id="contactForm" method="" action="mail.php"> <p> <Label for="name"> <שם / label> <input id="name" name="name" /> </ p> <p> <Label for="email"> דואר אלקטרוני </ label> <input id = "דוא"ל" שם = "דוא"ל" /> </ 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> </ div> </ body> </ html> 

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