לערבב אייאקס לתוך HTML עם Intercooler.js

זה אף פעם לא היה קל יותר הוסף Ajax לכל אתר אינטרנט. למעשה זה די נפוץ לבנות אתרי אינטרנט שלמים המבוססת על בקשות אייאקס שקוראים לו אפליקציות של דף יחיד (או ספא).

עם זאת זה תמיד נדרש קצת jQuery וכמה wrangling טכנית עדכון תוכן הדף. אם אתה רק צריך קצת פונקציונליות בסיסית של אייאקס אתה יכול להשתמש intercooler.js כדי לערבב את זה לתוך ה- HTML שלך.

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

כל זה מסתמך על נתונים HTML5 * תכונות כמו אייקון. ניתן להוסיף תכונה זו ללחצן או לקישור עוגן, וזה יהיה התחבר אוטומטית אל jQuery עבור בקשת POST של Ajax.

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

לחץ עלי!

זה היה שלח בקשה ל- Ajax POST לכתובת האתר / buton_click, ו לטעון את התגובה לתוך אלמנט המכולה. Intercooler היא ספריה די פשוטה וחזקה להפליא ברגע שאתה מבין איך זה עובד.

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

Intercooler.js מציעה דרך סמלית יותר לכתיבת קוד Ajax כך שהוא טוען ואפילו מציע הילידים fallback.

ל להתקין intercooler - - אתה רק צריך עותק של jQuery יחד עם עותק של ספריית intercooler אשר ניתן למצוא על GitHub. אתה יכול אפילו הבדיקה ללא הורדה - - כל הקבצים באמצעות CDN jQuery המקומי CDC Intercooler.

שים את שניהם לתוך > תג בכותרת הדף שלך, ולאחר מכן פשוט למקם את תכונות HTML בכל מקום שתרצה!

תסתכל על דף הדגמות לראות א רשימה מלאה של הדגמות אתה יכול לשחק עם. אני במיוחד אוהב את 'לחץ כדי לערוך' הדגמה כי זה מראה בדיוק מה אפשרי וכמה רחוק אתה יכול לקחת את זה plugin.

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

באופן טבעי, אתה יכול למצוא כל קוד המקור בחינם על GitHub יחד עם מדריך התקנה קצר.