7 yıl önce 2 yorum
Merhaba, 2 video'yu birleştirmemin amacı gereksiz konulardan uzaklaşmak ve zaten basit olan bir konuyu daha da zorlaştırmamak.
Öncelikle angularjs ajax diye tabir ettiğimiz XMLHttpRequest alt yapısını kullanan $http'nin kullanımından bahsedeceğiz. $http'nin gayet basit bir yapısı var. Örneğin bize bilgi veren bir api bulalım. Aaa hemen bulduk github. github'ın kullanıcılarını tutan bir apisi var. Bu api den github'ın yaklaşık ilk 30 kullanıcısı geliyor. Mesela bu api den gelen verileri ekrana yazdıralım. ( dikkat edin ben şu anki angularjs veriyonunu kullanıyorum 1.6.1 )
<!DOCTYPE html>
<html lang="en" ng-app="test">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script>
angular.module('test', [])
.controller('TestCtrl', function ($scope, $http) {
$scope.data = [];
$http.get("https://api.github.com/users").then(function(res) {
$scope.data = res.data; // genen verileri data değişkenine attık.
});
});
</script>
</head>
<body ng-controller="TestCtrl">
<table>
<tr>
<td>Resim</td>
<td>Kullanıcı adı</td>
<td>Profil</td>
</tr>
<tr ng-repeat="item in data">
<td><img ng-src="{{item.avatar_url}}" width="50px" /></td> <!-- Kullanıcının resmi -->
<td>{{item.login}}</td> <!-- kullanıcının kullanıcı adı -->
<td><a href="{{item.html_url}}" target="_blank">{{item.html_url}}</a></td> <!-- Kullanıcının profil linki -->
</tr>
</table>
</body>
</html>
Evet bu şekilde bir yapısı var deyip bırakmıyorum tabi. Şimdi ise neler ile karşılaştığımızdan bahsedelim. $http fonksiyonunu controller'a dahil ettik, kullanırken ise get methodu ile çağırdık. Aslında bu kullanımın dışında sizin daha fazla gönderme biçimi tercih edeceğinizi düşünürsek, daha gelişmiş bir kullanım ise... örnekleyecek olursak; aynı işlemi get methodu ile yapalım ama farklı bir tarzda.
$http({
method: "GET", // method get
url: "https://api.github.com/users" // urlmiz
}).then(function(res) {
$scope.data = res.data; // genen verileri data değişkenine attık.
});
işte burada daha değiştirilebilir bir yapı var. Peki bunu post ile yapsak olur muydu ? Ne yazıkki github get methoduna destek veriyor. O zaman post methodu için bir api bulmamız gerekiyor. Biz php ile bir api oluşturalım.
<?php
// kendi domainim dısındaki scriptlere izin veriyorum
if (isset($_SERVER['HTTP_ORIGIN'])) {
header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Max-Age: 86400');
}
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");
exit(0);
}
if (isset($_POST["userName"]) && isset($_POST["userPassword"]) ) {
if ($_POST["userName"] == "root" && $_POST["userPassword"] == "1234") { // şifre kontrolü
echo json_encode(["result" => 1]);
die();
}
}
// şifre hatalıysa zaten buraya gelir
echo json_encode(["result" => -1]);
?>
Bu api bize userName ve userPassword parametrelerine göre resut değeri 1 ise doğru giriş, -1 ise yanlış giriş olduğunu söylüyor. Baştaki access olayı ise apimizi post methoduna açmak için kullandık yoksa farklı domainler içindeki scriptleri çalıştırmaz. şimdi ise $http merhodu ile ona istediği parametreleri gönderelim ve dönen değeri yazdıralım.
angular.module('test', [])
.controller('TestCtrl', function ($scope, $http, $httpParamSerializerJQLike) {
$scope.data = [];
$http({
method: "POST", // method bu sefer post
url: "http://localhost/index.php", // urlmiz
data: $httpParamSerializerJQLike({ // serialize etmek için kullandığımız method
userName: 'root',
userPassword: '1234'
}),
headers: { // gönderme tipimiz burası çok önemli
"Content-Type": "application/x-www-form-urlencoded"
}
}).then(function(res) {
$scope.data = res.data; // genen verileri data değişkenine attık.
});
});
Kullandığımız $httpParamSerializerJQLike Content-Type'ın application/x-www-form-urlencoded olmasıydı bu json datasını serialize eder. Oradaki değeri userName=root&userPassword=1234 şekline çevirir. Bugünkü konumuz bu kadardı anlamadığınız bir yer olursa yorumlarda belirtebilirsiniz :)
Düşündüklerin nedir ?
Yorumlar ({{totalCommentCount}})
{{commentLike117Count}} beğenme 4 yıl önce
{{commentLike118Count}} beğenme 4 yıl önce