AngularJS AJAX

Szerző: Sallai András
Copyright © Sallai András, 2014, 2015
Licenc: GNU Free Documentation License 1.3
Web: http://szit.hu

Adat küldése a szervernek

<!DOCTYPE html>
<html>
<head>
    <title>Küld</title>
    <meta charset="UTF-8">
<script src="http://code.angularjs.org/1.3.15/angular.min.js"></script>
<script>
var egyApp = angular.module('egyApp', []);
egyApp.controller('egyCtrl', function($scope, $http){
    var adat = "egy";
 
    $http({
        method : 'POST',
        url : 'http://localhost/~andras/b/recv.php',
        data : 'data=' + adat,
        headers : {
            'Content-Type' : 'application/x-www-form-urlencoded'
        }
    })
    .success(function(){
        $scope.msg = "Ok";
    }); 
 
});  
</script>
</head>
<body ng-app="egyApp" ng-controller="egyCtrl">
{{35*4}}
<div ng-bind="msg"></div>    
 
</body>
</html>

recv.php

<?php
 
$adat = $_POST['data'];
 
$f = fopen("naplo.log", "w");
 
fputs($f, $adat);
 
fclose($f);

Adatok fogadása a szervertől

index.html

<!DOCTYPE html>
<html>
<head>
    <title>AJAX</title>
    <meta charset="UTF-8">
</head>
<body>
<h1>AJAX</h1>
<div ng-app="myApp" ng-controller="customersCtrl"> 
 
<ul>
  <li ng-repeat="dolgozo in dolgozok">
    {{ dolgozo.Nev + ', ' + dolgozo.Fizetes }}
  </li>
</ul>
 
</div>
 
 
<script src="http://code.angularjs.org/1.3.15/angular.min.js"></script>    
<script src="script.js"></script>   
 
</body>
</html>

script.js

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("http://localhost/php/004/kuld.php")
    .success(function(response) {
        $scope.dolgozok = response.records;});
});

kuld.php

<?php
 
echo <<<EOT
{
"records": [
  {
    "Nev" : "Nagy János",
    "Telepules" : "Szolnok",
    "Fizetes" : "780000"
  },
  {
    "Nev" : "Per Mária",
    "Telepules" : "Miskolc",
    "Fizetes" : "560000"
  }
]
}
EOT;

Küldés újra

$http.post("fogado.php", {
		id: $scope.id,
		name: $scope.name
	})
	.success(function(data) {
		$scope.id = "";
		$scope.name = "";
	})
	.error(function() {
		alert("Hiba! A küldés nem sikerült!");
	});

Forrás PHP-ban:

$jsondata = file_get_contents("php://input");
$data = json_decode($jsondata);
@$id = $data->id;
@$name = $request->name;

PHP tömb JSON formába

$omid = "123";
$nev = "Nagy János";
 
$tomb = array(
	"omid" => $omid, 
	"nev" => $nev
	);
 
$jsonforma = json_encode($tomb);
echo $jsonforma;