נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

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

הפעלת מקשי הקיצור תלויה בדפדפן שבו אתם משתמשים.

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

מדריך Ajax בדרך האנגולרית

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

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

AJAX פועל על ידי פקודות שזורמות באופן רציף מהדפדפן אל השרת, ומחזירות ממנו את המידע הנדרש. כשהמשתמש מבצע פעולה דוגמת הקלקה על אלמנט או גלילת הדף, קוד java script שמאזין לפעולה, שולח קריאה לשרת, והשרת מעבד את הקריאה, ומחזיר את המידע הנדרש להצגה בדפדפן.

ב-Angular משתמשים בשירות ששמו http$, שהופך את העבודה עם AJAX לקל ופשוט במיוחד.

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

 

אתם מוזמנים לנסות את האפליקציה שנכתוב במדריך בקישור הבא:

להדגמה

 

השירות http$ של Angular

השירות http$ מאפשר את העבודה עם AJAX באפליקציות של AngularJS. כדי להשתמש בשירות, עלינו להזריק לקונטרולר את האובייקט http$, שהוא שירות מובנה של אנגולר.


var ajaxExample = angular.module('ajaxExample', []);

ajaxExample.controller('mainController', function($scope, $http){

});

במדריכים קודמים כבר נתקלנו בשירות של אנגולר שהוא ה-scope$, שבו השתמשנו כדי להדביק בין הלוגיקה לבין ה-HTML.

כדי לעבוד עם השירות http$ צריך להגדיר מספר פרמטרים:

  • הפרמטר method שמגדיר האם מקבלים מידע ב-GET או שולחים מידע ב-POST.
  • הפרמטר url שמגדיר את הכתובת שבה נמצא ה-api שמולו עובדים (צד השרת של האפליקציה).
  • קוד שצריך לרוץ במקרה של הצלחה.
  • קוד שצריך לרוץ במקרה של כישלון.

 

כך נראית קריאה של נתונים ממקור המידע

כדי לקבל מידע, עלינו להגדיר את המתודה כ-get, כמו גם את ה-url של מקור המידע (api/get.php בדוגמה).


$http({
    method: 'GET',
    url: 'api/get.php'
}).then(function (response) {
    // code to run on success
}, function (response) {
    // code to run on error
});

במקרה של הצלחה, יופעל התנאי then, ובמקרה של שגיאה תירה הפונקציה השנייה.

אחרי שהבנו את המבנה הבסיסי של שימוש ב- AJAX באפליקציות אנגולריות, נעבור לכתוב את ההטמ"ל.

 

ההטמ"ל שישרת את האפליקציה

הקוד יימצא בקובץ index.html

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

  • האפליקציה תוגדר באמצעות ng-app על התגית html. שם האפליקציה: ajaxExample.
  • נגדיר את הקונטרולר ששמו mainController על הטופס (form).
  • נגדיר את שדות הקלט בתור ng-model:
    • newName לשדה השם.
    • newNickName לשדה שבו מגדירים את הכינוי.
  • על האלמנט btn נגדיר את ng-click שיפעיל את המתודה addUser.
  • הרשימה מציגה את שמות המשתמשים שנוספו באמצעות הטופס, והיא עושה זאת באמצעות ng-repeat.
  • כל פריט ברשימה כולל את השם והכינוי וכפתור שלחיצה עליו מפעילה את הפונקציה deleteUser שמוחקת את הרשומה.

<!doctype html>
<html ng-app="ajaxExample">
<head lang="he-IL">
<meta charset="utf-8">
<title>Angular Ajax מדריך</title>
</head>
<body>
    <form ng-controller="mainController">
<h2>הטופס</h2>
	
<p>מלא שם חדש והגש את הטופס</p>
<div>
    <label>שם</label>
    <input type="text" ng-model="newName">
</div>
		
<div>
    <label>כינוי</label>
    <input type="text" ng-model="newNickName">
</div>

<input type="button" value="הוסף" ng-click="addUser()">
	
</form>

<h2>הרשימה</h2>
<p>ברשימה זו יוצגו השמות שהתווספו באמצעות הטופס.</p>

<ul>
    <li ng-repeat="user in users">
        <button ng-click="deleteUser( user.id )">Delete</button> {{ user.name }} {{ user.nickName }}
    </li>
</ul>

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
<script src="/assets/js/app.js"></script>


</body>
</html>

 

קוד האנגולר

הקוד יימצא בקובץ assets/js/app.js.

קוד האנגולר כולל 3 פונקציות:

  1. getUsers שעובד ב-AJAX עם סקריפט PHP שקורא את הרשומות ממסד הנתונים, ומוסיף את הרשומות לרשימה.
  2. addUser מקבל את השמות שנוספו באמצעות הטופס, ושולח אותו ב-AJAX לסקריפט PHP שמכניס את המידע החדש למסד הנתונים.
  3. deleteUser מקבל את id הרשומה, ושולח קריאת AJAX לסקריפט PHP שמוחק את הרשומה ממסד הנתונים.

var ajaxExample = angular.module('ajaxExample', []);

ajaxExample.controller('mainController',function($scope,$http){
	$scope.users;

	$scope.getUsers = function() {
          $http({
            method: 'GET',
            url: '/api/get.php'
          }).then(function (response) {// on success
            // this callback will be called asynchronously
            // when the response is available
            $scope.users = response.data;
          }, function (response) {// on error
            // called asynchronously if an error occurs
            // or server returns response with an error status.
            console.log(response.data,response.status);
          });
	};

	$scope.addUser = function() {
          $http({
            method: 'POST',
            url:  '/api/post.php',
            data: {newName: $scope.newName, newNickName: $scope.newNickName }
          }).then(function (response) {// on success
            
            $scope.getUsers();
            
          }, function (response) {// on error
            console.log(response.data,response.status);
          });
	};

        $scope.deleteUser = function( id ) {


          $http({
            method: 'POST',
            url:  '/api/delete.php',
            data: { userId : id }
          }).then(function (response) {
        
            $scope.getUsers();
        
          }, function (response) {
            console.log(response.data,response.status);
          });
        };

        $scope.getUsers();
});

 

קוד PHP

את קוד ה-PHP נשים בתיקיית api, והוא כולל את הקבצים הבאים:

  1. functions.php שכולל את הפונקציה connect שמתקשרת עם מסד הנתונים
  2. get.php ששולף את המידע ממסד הנתונים
  3. post.php שמשמש כדי להוסיף את המידע למסד הנתונים
  4. delete.php שמשמש כדי למחוק רשומות ממסד הנתונים

functions.php משמש להתקשרות עם מסד הנתונים

<?php
// db credentials
define('DB_HOST', 'localhost');
define('DB_USER','root');
define('DB_PASS','');
define('DB_NAME','angular');

// connect with the database.
function connect()
{
  $connect = mysqli_connect(DB_HOST ,DB_USER ,DB_PASS ,DB_NAME);

  if (mysqli_connect_errno($connect))
  {
    echo "Failed to connect:" . mysqli_connect_error();
    die();
  }

  mysqli_set_charset($connect, "utf8");


  return $connect;
}

 

get.php משמש לקריאת כל הרשומות ממסד הנתונים

<?php
require 'functions.php';

$connect = connect();

// Get the data
$users = array();
$sql = "SELECT id, name, nickName FROM users WHERE 1";

if($result = mysqli_query($connect,$sql))
{
  $count = mysqli_num_rows($result);

  $cr = 0;
  while($row = mysqli_fetch_assoc($result))
  {
      $users[$cr]['id']       = $row['id'];
      $users[$cr]['name']     = $row['name'];
      $users[$cr]['nickName'] = $row['nickName'];

      $cr++;
  }
}

$json = json_encode($users);
echo $json;
exit;

צריך לעשות לתוצאה json_encode.

 

post.php משמש להוספת רשומות למסד הנתונים

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

file_get_contents("php://input")

צריך לעשות json_decode לנתונים.

<?php
require 'functions.php';

$connect = connect();

// Add the new data to the database.
$postdata = file_get_contents("php://input");
if(isset($postdata) && !empty($postdata))
{
    $request     = json_decode($postdata);
	
    $newName     = preg_replace('/[^a-zA-Zא-ת ]/','',$request->newName);
    $newNickName = preg_replace('/[^a-zA-Zא-ת ]/','',$request->newNickName);
	
    $newName     = mysqli_real_escape_string($connect,$newName);
    $newNickName = mysqli_real_escape_string($connect,$newNickName);

    $sql = "INSERT INTO `users`(`name`, `nickname`) VALUES ('$newName','$newNickName')";

    mysqli_query($connect,$sql);
}

 

delete.php משמש למחיקת רשומות ממסד הנתונים

<?php
require 'functions.php';

$connect = connect();

// Delete single record by id.
$postdata = file_get_contents("php://input");
if(isset($postdata) && !empty($postdata))
{
    $request = json_decode($postdata);

    $userId  = (int)mysqli_real_escape_string($connect,$request->userId);

    $sql = "DELETE FROM `users` WHERE `id` = " . $userId;

    mysqli_query($connect,$sql);
}

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

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

 

= 3 + 7

תמונת המגיב

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

הקונטרולר הולך רק על התג form מה שגורם למידע שמתקבל לא להיות מוצג.

תמונת המגיב

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

או שתעטוף את התוצאות בתוך תגיות הטופס. או שתעטוף את הטופס ביחד עם הדיב של התוצאות בתוך אותו קונטרולר.

תמונת המגיב

מאי בתאריך: 13.05.2017

תודה רבה מובן מאוד....

תמונת המגיב

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

בכיף.