מדריך 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 פונקציות:
- getUsers שעובד ב-AJAX עם סקריפט PHP שקורא את הרשומות ממסד הנתונים, ומוסיף את הרשומות לרשימה.
- addUser מקבל את השמות שנוספו באמצעות הטופס, ושולח אותו ב-AJAX לסקריפט PHP שמכניס את המידע החדש למסד הנתונים.
- 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, והוא כולל את הקבצים הבאים:
- functions.php שכולל את הפונקציה connect שמתקשרת עם מסד הנתונים
- get.php ששולף את המידע ממסד הנתונים
- post.php שמשמש כדי להוסיף את המידע למסד הנתונים
- 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);
}
אהבתם? לא אהבתם? דרגו!
0 הצבעות, ממוצע 0 מתוך 5 כוכבים
המדריכים באתר עוסקים בנושאי תכנות ופיתוח אישי. הקוד שמוצג משמש להדגמה ולצרכי לימוד. התוכן והקוד המוצגים באתר נבדקו בקפידה ונמצאו תקינים. אבל ייתכן ששימוש במערכות שונות, דוגמת דפדפן או מערכת הפעלה שונה ולאור השינויים הטכנולוגיים התכופים בעולם שבו אנו חיים יגרום לתוצאות שונות מהמצופה. בכל מקרה, אין בעל האתר נושא באחריות לכל שיבוש או שימוש לא אחראי בתכנים הלימודיים באתר.
למרות האמור לעיל, ומתוך רצון טוב, אם נתקלת בקשיים ביישום הקוד באתר מפאת מה שנראה לך כשגיאה או כחוסר עקביות נא להשאיר תגובה עם פירוט הבעיה באזור התגובות בתחתית המדריכים. זה יכול לעזור למשתמשים אחרים שנתקלו באותה בעיה ואם אני רואה שהבעיה עקרונית אני עשוי לערוך התאמה במדריך או להסיר אותו כדי להימנע מהטעיית הציבור.
שימו לב! הסקריפטים במדריכים מיועדים למטרות לימוד בלבד. כשאתם עובדים על הפרויקטים שלכם אתם צריכים להשתמש בספריות וסביבות פיתוח מוכחות, מהירות ובטוחות.
המשתמש באתר צריך להיות מודע לכך שאם וכאשר הוא מפתח קוד בשביל פרויקט הוא חייב לשים לב ולהשתמש בסביבת הפיתוח המתאימה ביותר, הבטוחה ביותר, היעילה ביותר וכמובן שהוא צריך לבדוק את הקוד בהיבטים של יעילות ואבטחה. מי אמר שלהיות מפתח זו עבודה קלה ?
השימוש שלך באתר מהווה ראייה להסכמתך עם הכללים והתקנות שנוסחו בהסכם תנאי השימוש.