כמה פעמים נתקלתם בעובדה שהזנת נתונים שגויים, שבגללה העמוד נטען מחדש ומחק לחלוטין את התווים שהוזנו בשדות. כדי לתקן זאת, יש גישה פופולרית למדי לבניית ממשק משתמש, ושמה הוא ajax. הוא מופיע בפרויקטים רבים ומשמש בדרכים רבות.
שליחת טופס Ajax: חיבור ספריות
כלול ספריית jquery ב-index.php.
יש דרך נוספת לכלול jquery במסמך. עליך להוריד את הספרייה מהאתר הרשמי של jquery, למקם אותה בתיקייה הנכונה ולהדביק את הקישור אליה כך:
חיבור והגדרת מסמכים
1. צור מסמך php בתיקייה עם האתר עם כל שם שנוח לך - זה יהיה שליחת טופס ה-ajax php. בו תוכלו לכתוב באיזה פורמט יוצג הטקסט עם ההודעה. לדוגמה, form1.php.
2. בתיקיית קבצי ה-javascript שלך, צור קובץ .js עםכל שם נוח. לדוגמה, form.js.
3. חבר את התיקיה הזו למסמך שלך.
4. צור טופס עם הפרמטרים הבאים:
בתוכו, אל תשכח ליצור שדות להזנת הנתונים שלך.
5. היכנסו לקובץ form1.php בספרייה עם האתר ובו כתוב:
כעת, בעת שליחת הטופס, הדפדפן יציג מידע על הנתונים.
באותו קובץ, אתה יכול לכתוב מה בדיוק יוצג או איך. אתה יכול גם לכתוב מחזורים או אלגוריתמים כאן.
שולח טופס jquery של ajax
1. בקובץ form.js שנוצר, עליך לכתוב את הקוד שאחראי על כך שהקובץ יעבוד לאחר טעינת דף האתר במלואה.
$(document).ready(function(){ //הקוד הבא שלנו ירוץ כאן });
2. לאחר מכן עליך להתאים אישית את כפתור השליחה. עשה הכל באותו קובץ.
$("form").submit(function(event) { event.preventDefault(); //הקוד הבא ייכתב כאן });
החלק הראשון של הקוד אחראי לבחירת הרכיב בדף, והשני אחראי למניעת פעולת ברירת המחדל.
3. לאחר מכן, למשל, קח הגשת טופס Ajax עם הצלחה.
$.ajax({ type: $(this).attr('method'), url: $(this).attr('action'), data: new FormData(this), contentType: false, cache: false, processData: false, success: function(result){ alert(result); } });
להלן תיאורים מפורטים של כל הגדרה.
- סוג -זהו סוג הבקשה המוגשת בטופס; מכיוון שזה עולה POST, סוג הבקשה יהיה מתאים;
- this - בחירת אלמנט בתוך המבנה;
- attr - קיצור של משיכה (אטרקציה), כלומר, פרמטר מסוים של המטרה (הצורה) שנבחרה נמשך;
- url - פרמטר שאחראי לאן תישלח הבקשה; במקרה זה, מה כתוב בפרמטרים של הטופס (form1.php);
- data - מציין נתוני טופס;
- contentType - אחראי על שליחת כותרות לשרת; במקרה זה אין צורך בו;
- cache - אחראי לשמירת המטמון של המשתמש;
- processData - אחראי להמרת נתונים למחרוזת;
- success - מציג את התוצאה של הגשת נתונים מוצלחת; לכן, אם שליחת הנתונים הצליחה, אזי הפעולות של הפונקציה מבוצעות.
4. סיימת, כעת בעת שליחת טופס ajax, תקבל נתונים מבלי לרענן את הדף.
ניתן לשנות את התוצאה באמצעות קובץ form1.php, שבו ניתן לציין מה בדיוק יוצג כתוצאה מכך. לדוגמה, ניתן להתנסות וליצור בדיקה לנכונות הזנת נתונים מסוימים: אם הנתונים אינם נכונים, אזי ההודעה הרצויה מוצגת, אחרת היא מפנה לדף הנכון. אפשר גם דברים רבים אחרים, מה שחפץ לבך.
יש גם שליחת נתונים לשרת באופן אסינכרוני. זה כאשר המשתמש מזין טקסט, והוא מסומן מיד באדום, מה שמציין שהנתונים שהוזנו אינם נכונים. בנוגע לזהיש הרבה מדריכים באינטרנט, שבהם הכל מוסבר בבירור ומוצג עם דוגמאות.
מסקנה
ללא ספק, ajax הוא כלי שימושי בבניית אתרים. כדי ליצור דפים וממשקים איכותיים, זה פשוט הכרחי. ראוי לציין שחשוב מאוד להכיר את jQuery כדי להבין עד הסוף את התמונה ומה כתוב בקוד, כי העתק-הדבק פשוט לא תמיד יכול לעזור וללמד אותך להבין את הקוד. תמיד כדאי לזכור שגרסאות השפה מעודכנות וחלק מהתכונות עשויות פשוט להיעלם. לכן, לא כל הפתרונות עשויים להיות רלוונטיים, לעתים קרובות הקוד הכתוב פשוט לא עובד או לא מייצר את התוצאה שהיית רוצה לראות על המסך שלך.
