תחי ישראל - אין לנו ארץ אחרת

תחי ישראל -אין לנו ארץ אחרת

שימוש ב-jQuery וב-AJAX כדי לטעון תוכן לדף באופן דינאמי

מחבר:
בתאריך:

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

מדריך AJAX , jQuery

 

המתודה jQuery.post

המתודה jQuery.post (או בקיצור: post.$) כוללת את החלקים הבאים:

  • הפנייה לסקריפט שירוץ בצד השרת ויטפל במידע. לדוגמה: סקריפט PHP.
  • אובייקט או מערך שמציב את הערכים שנשלחים מהמשתמש למידע שנשלח לשרת. בדוגמה זו, האובייקט הוא {input : getContent}, והוא מציב את המידע (getContent) שמתקבל מהמשתמש לתוך input שבו משתמש השרת. 
  • פונקציה לביצוע לאחר שחוזר המידע מהדפדפן. בדרך כלל, פונקציה זו מאפשרת את הצגת המידע (data) שהתקבל מהשרת. 

מבנה התיקיות בשביל AJAX כולל javascript, html, php

 

דוגמת סקריפט שמשתמשת ב-jQuery.post

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

 

להדגמה

 

הפעלת הסקריפט מחייבת שרת (לדוגמה, WAMP שהופך את המחשב לשרת מקומי). בתיקייה שבשרת המקומי ניצור את מבנה התיקיות הבא:

 

מבנה התיקיות בשביל AJAX כולל javascript, html, phppost. בתוכה ניצור את התיקיות הבאות: images, javascript, php

לתיקיית images נוסיף את התמונות: red.png ו-blue.png

לתיקיית ה-javascript נוסיף את הקובץ ajax.js

לתיקיית ה-PHP נוסיף את הקובץ input.php

ההטמ"ל יימצא בקובץ index.php

 

ההטמ"ל כולל

1. טופס לבחירה של התמונה

2. פסקה שבה תשובץ התמונה

3. הפנייה לסקריפטים של javascript

<!doctype html>
<html lang="he-IL">
<head>
  <meta charset="utf-8">
  <title>מדריך jQuery.get</title>
</head>

<body dir='rtl'>
<form><!--הטופס מכיל אפשרות לבחירה של תמונות-->
  <p>בחר את סוג התמונה:</p>
  <select id='select'>
  <option value="red">אדום</option>
  <option value="blue">כחול</option>
  </select>
</form>
 
<!התמונות שיוחזרו יוצגו כאן---->
<p id="feedback"> </p>
 
<!--הסקריפטים-->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type='text/javascript' src='javascript/ajax.js'></script>
</body>
</html>

 

סקריפט PHP שירוץ בצד השרת

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

<?php
//מערך של שמות התמונות
$images = array("red", "blue");
 
//?האם הטופס הוגש
if(!empty($_POST['input']) || isset($_POST['input'])){
  //אם המשתמש בחר בסוג התמונה, ושלח את הטופס אז נאחסן את מה שהוא שלח במשתנה
  //$type
  //זו פונקציה שהופכת את כל האותיות לאותיות קטנות strtolower()
  //משמשת מסיבות של אבטחה htmlentities()
  $type = htmlentities(strtolower($_POST['input']));

  //אם התמונה קיימת במערך
  if (in_array($type, $images )){
                //תחזיר את התמונה
    $image_name = 'images/'. $type.'.png';
    echo '<img src=" '.$image_name.' ">';
  } else {
    //אם התמונה לא קיימת תחזיר הודעה 
    echo 'לא נמצא. בחר תמונה אחרת';
  }
}
?>

 

סקריפט jQuery שיקשר בין השרת לדפדפן

הסקריפט הבא מאזין לטופס, ובמידה והמשתמש בחר את אחת האפשרויות הוא קורא לפונקציה loadContent ומעביר לה את בחירת המשתמש (המשתנה selected). הפונקציה מעבירה את המידע לשרת (סקריפט ה-PHP), ומעבירה את התוצאה שחזרה מהשרת חזרה לדפדפן. מה שמאפשר לעשות זאת היא המתודה jQuery.post.

<script>
//פונקציה שמעבירה את בחירת המשתמש לשרת
function loadContent(selected){
  var feedback = $('#feedback'),
  getContent = selected;
  //post
  $.post('php/input.php', {input : getContent} , function(data) {
    //לוקח את המשתנה שמחזיר השרת ומשבץ חזרה בהטמל
    feedback.html(data);
  });
}
 
//קורא לפונקציה כשהמשתמש בחר באחת האפשרויות בטופס
$("#select").on('change', function(){
  var selected = $(this).children(":selected").val();
  //מעביר את בחירת המשתמש לפונקציה
  loadContent(selected);
});
  
//קורא לפונקציה בפעם הראשונה שהדף נטען
$(window).on('load', loadContent('red'));
<script>

 

לכל מדריכי ה-PHP

 

אהבתם? לא אהבתם? דרגו!

0 הצבעות, ממוצע 0 מתוך 5 כוכבים

 

 

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

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

שימו לב! הסקריפטים במדריכים מיועדים למטרות לימוד בלבד. כשאתם עובדים על הפרויקטים שלכם אתם צריכים להשתמש בספריות וסביבות פיתוח מוכחות, מהירות ובטוחות.

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

השימוש שלך באתר מהווה ראייה להסכמתך עם הכללים והתקנות שנוסחו בהסכם תנאי השימוש.

הוסף תגובה חדשה

 

 

ענה על השאלה הפשוטה הבאה כתנאי להוספת תגובה:

דג למים הוא כמו ציפור ל...?

 

תמונת המגיב

יואב בתאריך: 05.07.2014

תודה על המדריכים.

תמונת המגיב

עידן בתאריך: 27.10.2014

המשתנים שלי לא מצליחים לעבור מ js ל php בעזרת הפונקציה הזאת
מה לעשות?

תמונת המגיב

אריאל בתאריך: 05.08.2015

שלום אחי , שה עושה לי בעיות עם העברית , זה הופך לי את קל הקידוד של הדף והכל נהפך לסימני שאלה או ריבועים

תמונת המגיב

יוסי בן הרוש בתאריך: 06.08.2015

הי אריאל. תוודא שהדף שלך מקודד ב-utf8 ושעל התגית של הסקריפט יהיה גם כן קידוד utf8.

תמונת המגיב

טוב מאוד בתאריך: 05.09.2015

great

תמונת המגיב

שמעון בתאריך: 27.07.2016

בסוף הדף יש לכל מדריכי php במקום jquery