כיצד להשתמש ב- AJAX לשליחת טופס אינטרנט

פרסומת

יתכן שקרא את שלנו מדריך jQuery מדריך בסיסי ל- JQuery למתכנתים של Javascriptאם אתה מתכנת Javascript, מדריך זה ל- JQuery יעזור לך להתחיל לקוד כמו נינג'ה. קרא עוד , כמו גם חלק חמישי שלנו מדריך jQuery בנושא AJAX מדריך jQuery (חלק 5): AJAX לכולם!כאשר אנו מתקרבים לסוף סדרת הדרכות המיני מיני של jQuery שלנו, הגיע הזמן שנבחן לעומק יותר את אחת התכונות המשומשות ביותר של jQuery. AJAX מאפשרת לאתר לתקשר עם ... קרא עוד , אבל היום אני אראה לך כיצד להשתמש ב- AJAX כדי לשלוח באופן דינמי טופס אינטרנט. JQuery היא ללא ספק הדרך הקלה ביותר להשתמש ב- AJAX, אז בדוק את שלנו תחילת ההדרכה מדריך jQuery - תחילת העבודה: יסודות ובוחריםבשבוע שעבר דיברתי על כמה חשוב jQuery לכל מפתח אינטרנט מודרני ומדוע זה מדהים. השבוע אני חושב שהגיע הזמן שנלכלך את היד עם קצת קוד ונלמד איך ... קרא עוד אם אתה מתחיל. בוא נקפוץ ממש פנימה.

מדוע להשתמש ב- AJAX

אתה אולי תוהה "מדוע אני צריך AJAX?" HTML מסוגל בצורה מושלמת להגיש טפסים, ועושה זאת בצורה ללא כאבים. AJAX מיושם ברוב גדול מדפי האינטרנט, והפופולריות שלו ממשיכה לעלות.

היתרון העצום שמביא AJAX הוא היכולת

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

• בדוק אם יש הודעות דוא"ל חדשות באופן קבוע.
• עדכן ציון כדורגל חי כל 30 שניות.
• עדכן את המחיר למכירה פומבית מקוונת.

AJAX מספקת לך, היזם, יכולת כמעט בלתי מוגבלת להפוך דפי אינטרנט למהירים, מגיבים ומהר - דבר שהמבקרים שלך יודה לך עליו.

ה- HTML

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

להלן ה- HTML הדרוש לך:

 שם: גיל: 

HTML זה מגדיר טופס עם כמה אלמנטים. שימו לב איך יש פעולה ו שיטה תכונות. אלה מגדירים היכן ואיך הגשת הטופס. אין צורך בכך כשאתה משתמש ב- AJAX, אך כדאי להשתמש בהם, מכיוון שהוא מבטיח שמבקרים באתר שלך עדיין יוכלו להשתמש בו אם JavaScript מושבת. דף זה כולל jQuery שמתארח על ידי Google באתר שלהם CDN מה הם CDN ומדוע אחסון אינו נושא ארוך יותרCDNs הופכים את האינטרנט לאינטרנט מהיר ובמחיר סביר, אפילו כשמדובר במיליוני משתמשים. ראשית, רוחב הפס עולה כסף; אלה מאיתנו עם חוזים מוגבלים יודעים שזה טוב מדי. לא רק אתה ... קרא עוד . ה ראש מכיל א תסריט תג - כאן תכתבו את הקוד שלכם.

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

ה- JavaScript

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

document.getElementById ('myForm'). להגיש ();

אתה יכול כמובן למקד לטופס באמצעות jQuery אם אתה מעדיף - זה לא משנה:

$ ('# myForm'). שלח ();

פקודה זו אומרת לדפדפן שלך לשלוח את הטופס, ממש כמו לחיצה על כפתור ההגשה. הוא ממקד לטופס לפי המזהה שלו, ובמקרה זה myForm. זה לא AJAX, כך שהוא יטען מחדש את כל הדף - דבר שלא תמיד רצוי.

בתוך ה שיטה תכונה של הטופס שלך, ציינת כיצד להגיש את הטופס. זה יכול להיות הודעה או לקבל. תכונה זו אינה משמשת בעת הגשת טפסים באמצעות AJAX, אך ניתן להשתמש באותה שיטה.

חלק גדול מהאינטרנט המודרני מנוהל מבקשות GET או POST. באופן כללי GET משמש לאחזור נתונים ואילו POST משמש לשליחת נתונים (ולהשבת תגובה). ניתן לשלוח נתונים באמצעות GET, אך POST הוא כמעט תמיד הבחירה הטובה יותר - במיוחד לנתוני טפסים. יתכן שראית בקשות GET בעבר - הם שולחים את הנתונים המצורפים לכתובת האתר:

SomeWebsite.com/index.html? שם = ג'ו

סימן השאלה מורה לדפדפן כי אין להשתמש בנתונים שמיד אחריו כדי לעבור את האתר, אלא יש לעבור לדף כדי לעבד אותו. זה עובד טוב לדברים פשוטים כמו מספר עמוד, אבל יש לו כמה חסרונות:

מגבלת תווים מרבית: יש מספר תווים מקסימלי שניתן לשלוח בכתובת אתר. יתכן שלא יהיה לך מספיק אם אתה מנסה לשלוח כמות גדולה של נתונים.
נראות: כל אחד יכול לראות את הנתונים שנשלחים בבקשת GET - לא מועיל נתונים רגישים כמו סיסמאות או נתוני טופס.

בקשות POST פועלות בצורה דומה, רק שהן לא שולחות את הנתונים בכתובת האתר. משמעות הדבר היא שניתן לשלוח כמות גדולה יותר של נתונים (נתונים ידועים כ- עומס), וקבלת אבטחה מסוימת על ידי אי חשיפת הנתונים. עם זאת, עדיין ניתן לגשת לנתונים בקלות, אז בחן את המידע תעודת SSL מה זה תעודת SSL והאם אתה צריך תעודה?גלישה באינטרנט יכולה להיות מפחידה כשמדובר במידע אישי. קרא עוד אם אתה רוצה שקט נפשי מוחלט.

בין אם משתמשים ב- POST או GET, הנתונים נשלחים מפתח -> ערך זוגות. בכתובת האתר שלמעלה המפתח הוא שם, והערך הוא ג'ו.

הדרך הטובה יותר להגיש טפסים היא להשתמש JavaScript ו- XML ​​אסינכרוני (AJAX). JavaScript תומך בשיחות AJAX, אך הן יכולות להיות מבלבלות לשימוש. JQuery מיישם את אותן שיטות בדיוק, אך עושה זאת בצורה קלה לשימוש. אתה יכול להורות לדפדפן שלך לבצע בקשת GET או POST - היצמד לדואר POST לדוגמה זו, אך בקשות GET מבוצעות בצורה דומה.

הנה התחביר:

$ .post ('כמה / url', $ ('# myForm'). סדרתי ());

קוד זה עושה כמה דברים. החלק הראשון ($) מאפשר לדפדפן שלך לדעת שאתה רוצה להשתמש ב- jQuery למשימה זו. החלק השני מכנה את הודעה שיטה מ- jQuery. עליכם לעבור בשני פרמטרים; הראשונה היא כתובת ה- URL שאליה יש לשלוח את הנתונים, ואילו השנייה היא הנתונים. אתה עשוי לגלות (תלוי בכתובת האתר שאליה אתה מנסה לגשת) כי הדפדפנים שלך ממוצא זהה מדיניות האבטחה עשויה להתערב כאן. אתה יכול להפעיל שיתוף משאבים חוצה-מקור כדי לעקוף את זה, אבל פשוט מספיק להצביע על כתובת URL שמתארחת באותו דומיין כמו הדף שלך.

הפרמטר השני מכנה את jQuery לערוך סדרות שיטה בטופס שלך. שיטה זו ניגשת לכל הנתונים מהטופס שלך, ומכינה אותם לשידור - היא מסדרת אותם בהמשכים.

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

לחלופין, דוור הוא כלי מצוין בחינם לבדיקת בקשות HTTP.

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

$ (מסמך) .on ('שלח', '# myForm', פונקציה () {$ .post ('כמה / url', $ ('# myForm'). סדרתי ()); להחזיר שקר; });

קוד זה עושה כמה דברים. כאשר הטופס שלך מוגש, הדפדפן שלך בא ומריץ תחילה את הקוד שלך. לאחר מכן הקוד שלך מגיש את נתוני הטופס באמצעות AJAX. השלב האחרון הנדרש הוא למנוע את הגשת הטופס המקורי - כבר עשית זאת באמצעות AJAX, כך שאתה לא רוצה שזה יקרה שוב!

אם אתה רוצה לבצע משימה אחרת לאחר סיום ה- AJAX (או אולי אפילו להחזיר הודעת סטטוס), עליך להשתמש ב התקשר חזרה. JQuery הופך אותם קלים מאוד לשימוש - פשוט העבירו פונקציה כפרמטר אחר כמו זה:

$ .post ('url', $ ('# myForm'). סדרתי (), פונקציה (תוצאה) {console.log (תוצאה); }

ה תוצאה הארגומנט מכיל נתונים שהוחזרו על ידי כתובת האתר שאליהם נשלחו הנתונים. אתה יכול להגיב בקלות לנתונים אלה:

אם (תוצאה == 'הצלחה') {// עשה משימה מסוימת. } אחר {// בצע משימה אחרת. }

זה זה לפוסט הזה. אני מקווה שעכשיו יש לך הבנה מוצקה של בקשות HTTP, וכיצד AJAX עובד בהקשר של טופס.

האם למדת טריקים חדשים היום? איך משתמשים ב- AJAX בטפסים? ספר לנו את מחשבותיך בתגובות למטה!

קרדיטים לתמונה: vectorfusionart / Shutterstock