كيف احصل على اياكس نموذج الاتصال

اياكس (جافا سكريبت غير المتزامنة وإكس إم إل) أصبحت أداة شعبية جدا في تصميم المواقع الإلكترونية. هذا البرنامج التعليمي سوف تتعلم كيفية إجراء اياكس شكل من أشكال الاتصال باستخدام بى وJquery. راجع التعليمات البرمجية في العمل هنا.

الخطوة 1 -- أتش تي أم أل

لبدء أمور قبالة يتيح إنشاء ملف جديد والذي يطلق عليه contact.html ، داخله نريد خلق نموذج بسيط أتش تي أم أل ، كما يلي :

  <divclass="loader"> </ div> 
  <divclass="bar"> </ div> 
  <divid="container"> 
    <formid="contactForm" method="" action="mail.php"> 
    <p> 
      <labelfor="name"> الاسم </ التسمية> 
      <inputid="name" name="name" /> 
    </ ع> 
    <p> 
      <labelfor="email"> البريد الإلكتروني </ التسمية> 
      <inputid="email" name="email" /> 
    </ ع> 
    <p> 
      <labelfor="message"> رسالتك </ التسمية> 
      <textareaid="message" name="message" rows="4" cols="30"> </ ناحية النص> 
    </ ع> 
    <p> 
      class="submit" <inputtype="submit" value="submit"/> 
    </ ع> 
    </ شكل> 
  </ div> 

الآن لدينا معيار شكل من أشكال الاتصال التي ستقدم الى Mail.php

الخطوة 2 -- [فب]

الآن نحن نريد لإنشاء ملف يسمى [فب] Mail.php هذا سوف تتعامل مع نتائج النموذج.

 <؟ فب / / نعلن اسم المتغيرات $ = $ _GET [ 'اسم'] ؛ البريد الإلكتروني $ = $ _GET [ 'البريد الالكتروني'] ؛ تعليق $ = $ _GET [ 'تعليق'] ؛ / / الحصول على موعد اليوم todayis $ = التاريخ ( "ل ، واو ي ، ي ، ز : الجيش العراقي") ؛ / / مجموعة عنوانا لموضوع الرسالة $ = "رسالة" ، رسالة دولار = "رسالة : $ تعليق \ ص \ ن من : $ اسم \ ص \ ن رد على : $ البريد الإلكتروني "؛ / / وضع بريدك الالكتروني هنا (" email@address.com "، $ الموضوع ، رسالة دولار) ؛؟> <! -- عرض رسالة الشكر في رد --> <h1 > <span>شكرا <h10><؟ [فب] $ صدى الاسم؟> </ h10> </ تمتد> </ h1> <p><span>رسالتك سيتم الرد في أقرب وقت ممكن. </ تمتد> < / ع> <h3>رسالة بعث على ما يلي : </ h3> <p><span><؟ [فب] $ صدى todayis؟> </ تمتد> </ ع> 

في هذه الصفحة نخلق بعض المتغيرات ، والذي جمع الاسم والبريد الالكتروني ورسالة من النموذج ، ثم استخدام البريد [فب] () وظيفة انها سترسل هذا إلى عنوان البريد الإلكتروني المحدد. من أجل هذا البرنامج التعليمي ط استخدمت email@example.com ، ولكن يمكنك استخدام كل ما تريد.

مرة واحدة كل هذا قد أعدم نحن سيتم عرض رسالة شكر. باستخدام بعض المعلومات التي جمعناها.

الخطوة 3 -- وJQuery

الآن يأتي الجزء ذكية. لبدء وسوف نحتاج ليشمل الإطار jquery. يمكنك تحميله من هذا الموقع jquery ، ثم نعلق عليه مثل ذلك.

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

Jquery هو خلق إطار جافا سكريبت لجعل الحياة أسهل كثيرا ، وإذا كانت المرة الأولى التي تستخدم ذلك ، تحقق من 15 يوما من Jquery. نحن نريد لإنشاء وظيفة لارسال شكل من الأشكال دون أخذ منا إلى صفحة أخرى. يمكننا أن نفعل هذا مثل ذلك.

  / / الدخول على تحميل الصفحة 
  $ (وظيفة)) ( 
    / / تقدم اياكس على الزناد 
    $ ( '# contactForm'). يقدم (وظيفة)) ( 

      / / إخفاء النموذج 
      $ ( '# contactForm'). اخفاء () ؛ 

      / / وتظهر في شريط التحميل 
      $ ( '. محمل'). إلحاق ($('.شريط ')) ؛ 
      $ ( '. شريط'). المغلق ((العرض : 'كتلة')) ؛ 

      / / إرسال طلب اياكس 
      $. الحصول على ( 'Mail.php' ، (الاسم اسم :$('# '). فال () ، 
                       البريد الإلكتروني البريد الإلكتروني :$('# '). فال () ، 
                       تعليق رسالة :$('# '). فال ()) ، 

      / / عودة البيانات 
      وظيفة (البيانات) ( 
        / / إخفاء الرسم 
        $ ( '. شريط'). المغلق ((العرض : 'لا شيء')) ؛ 
        $ ( '. محمل'). إلحاق (البيانات) ؛ 
      )) ؛ 

    / / البقاء في الصفحة 
    عودة كاذبة ؛ 
    )) ؛ 
  )) ؛ 

هذا الرمز من شأنه أن يؤدي هذا الحدث عندما يكون النموذج الذي قدمه والذي سيتم إخفاء شكل وعرض شريط التحميل. دولار. الحصول على () هو الخط الذي يجعل الدعوة الى اياكس Mail.php التي ترسل تفاصيل شكل عبر حصول على الأسلوب. مرة واحدة على اياكس وقد نجحت النتيجة بعد ذلك سوف يتم عرضها على الشاشة. هذا يقحم محتويات Mail.php إلى صفحة contact.html.

الخطوة 4 -- والمغلق

والخطوة الأخيرة هي لإضافة بعض التصميم المغلق إلى النموذج للتأكد من أننا يمكن إظهار وإخفاء الأشياء بشكل صحيح. وليس [نكستي] ، ولكنه يجعلها تبدو أكثر نظافة.

  الهيئة ( 
    الخط الأسرة : هلفتيكا ؛ 
  ) 

  . محمل ( 

  ) 

  . شريط ( 
    العرض : لا شيء ؛ 
    خلفية : عنوان ( 'اياكس - loader.gif') عدم تكرار ؛ 
    هامش اليسار : 20px ؛ 
    هامش قمة : 50px ؛ 
    الطول : 20px ؛ 
    العرض : 230px ؛ 
  ) 

  # contactForm ( 
    تعويم : غادر ؛ 
    الموقف : النسبية ؛ 
    لون الخلفية : # fdfdfd ؛ 
    الطول : 200px ؛ 
  ) 

  # حاوية ( 
    الحشو : 20px ؛ 
    تعويم : غادر ؛ 
    الموقف : النسبية ؛ 
    الطول : 200px ؛ 
    العرض : 100px ؛ 
  ) 

الخطوة 5 -- وضع معا

إذا وضعت جميع رمز معا بك contact.html ينبغي أن تبدو هذه.

  <html> 
  <head> 
  <scripttype="text/javascript" src="../jquery.js"> </ النصي> 

  <scripttype="text/javascript"> 
  / / الدخول على تحميل الصفحة 
  $ (وظيفة)) ( 
    / / تقدم اياكس على الزناد 
    $ ( '# contactForm'). يقدم (وظيفة)) ( 

    / / إخفاء النموذج 
    $ ( '# contactForm'). اخفاء () ؛ 

    / / وتظهر في شريط التحميل 
    $ ( '. محمل'). إلحاق ($('.شريط ')) ؛ 
    $ ( '. شريط'). المغلق ((العرض : 'كتلة')) ؛ 

    / / إرسال طلب اياكس 
    $. الحصول على ( 'Mail.php' ، (الاسم اسم :$('# '). فال () ، 
                     البريد الإلكتروني البريد الإلكتروني :$('# '). فال () ، 
                      تعليق رسالة :$('# '). فال ()) ، 

    / / عودة البيانات 
    وظيفة (البيانات) ( 
      / / إخفاء الرسم 
      $ ( '. شريط'). المغلق ((العرض : 'لا شيء')) ؛ 
      $ ( '. محمل'). إلحاق (البيانات) ؛ 
    )) ؛ 

    / / البقاء في الصفحة 
    عودة كاذبة ؛ 
    )) ؛ 
  )) ؛ 
  </ النصي> 
  <styletype="text/css"> 

  الهيئة ( 
    الخط الأسرة : هلفتيكا ؛ 
  ) 

  . محمل ( 

  ) 

  . شريط ( 
    العرض : لا شيء ؛ 
    خلفية : عنوان ( 'اياكس - loader.gif') عدم تكرار ؛ 
    هامش اليسار : 20px ؛ 
    هامش قمة : 50px ؛ 
    الطول : 20px ؛ 
    العرض : 230px ؛ 
  ) 

  # contactForm ( 
    تعويم : غادر ؛ 
    الموقف : النسبية ؛ 
    لون الخلفية : # fdfdfd ؛ 
    الطول : 200px ؛ 
  ) 

  # حاوية ( 
    الحشو : 20px ؛ 
    تعويم : غادر ؛ 
    الموقف : النسبية ؛ 
    الطول : 200px ؛ 
    العرض : 100px ؛ 
  ) 

  </ النمط> 
  </ رئيس> 
  <body> 
  <divclass="loader"> </ div> 
  <divclass="bar"> </ div> 
  <divid="container"> 
    <formid="contactForm" method="" action="mail.php"> 
    <p> 
      <labelfor="name"> الاسم </ التسمية> 
      <inputid="name" name="name" /> 
    </ ع> 
    <p> 
      <labelfor="email"> البريد الإلكتروني </ التسمية> 
      <inputid="email" name="email" /> 
    </ ع> 
    <p> 
      <labelfor="message"> رسالتك </ التسمية> 
      <textareaid="message" name="message" rows="4" cols="30"> </ ناحية النص> 
    </ ع> 
    <p> 
      class="submit" <inputtype="submit" value="submit"/> 
    </ ع> 
    </ شكل> 
  </ div> 
  </ هيئة> 
  </ هتمل> 

حتى باستخدام 2 فقط الملفات التي أنشأناها الذاتية الخاصة بك جدا قوية اياكس conatct شكل من الأشكال. وعلى البساطة. تحميل رمز ومحاولة لنفسك.