[Ajax][Multi] Hello World

Avatar du membre
voxdemonix
Messages : 1237
Enregistré le : lun. févr. 02, 2015 7:28 pm

[Ajax][Multi] Hello World

Message par voxdemonix » sam. avr. 11, 2015 1:19 am

[AngularJS] via $http.get OLD METHOD (source)
[flagFR] Recuperer le Hello World format JSON et afficher ses valeurs
[flagEN] Recover Hello World JSON format and display variable

Code : Tout sélectionner

<html><HEADER></HEADER>
<script src="https://www.0rion.netlib.re/libs/angularjs/1.2.14/angular.min.js"></script>	
<BODY ng-app="MyApp">
<div ng-controller="OneVariable">
	    <ul ng-repeat="post in posts">
	      <li>test de Hello World via JSON (<a href="https://www.0rion.netlib.re/outils/hwJSON.php">outils/hwJSON.php</a>) avec une seule variable : {{post}}</li>
	    </ul>
	</div>
<div ng-controller="MoreVariable">
	      test de Hello World via JSON (<a href="https://www.0rion.netlib.re/outils/hw2JSON.php">outils/hw2JSON.php</a>)  avec plusieurs variables : {{secondTest.plop}}
	      et la seconde case : {{secondTest.secondecase}}
	</div>
<script>
var app = angular.module("MyApp", []);

app.controller("OneVariable", function($scope, $http) {
  $http.get('https://www.0rion.netlib.re/outils/hwJSON.php').
    success(function(data, status, headers, config) {
      $scope.posts = data;
    }).
    error(function(data, status, headers, config) {
      // log error
    });
});
app.controller("MoreVariable", function($scope, $http) {
  $http.get('https://www.0rion.netlib.re/outils/hw2JSON.php').
    success(function(data, status, headers, config) {
      $scope.secondTest = data;
    }).
    error(function(data, status, headers, config) {
      // log error
    });
});

</script>
</BODY>
</html>
Demo : ../outils/tryAjax.php



[AngularJS] via $http.get NEW METHOD (source)
[flagFR] Recuperer le Hello World format JSON et afficher ses valeurs
[flagEN] Recover Hello World JSON format and display variable

Code : Tout sélectionner

<html><HEADER></HEADER>
<script src="https://www.0rion.netlib.re/libs/angularjs/1.2.14/angular.min.js"></script>   
<BODY ng-app="MyApp">
<h2>Via AngularJS (<a href="https://docs.angularjs.org/api/ng/service/$http">$http.get</a>)</h2>
<div ng-controller="OneVariable">

        <ul ng-repeat="post2 in posts2">
         <li>test de Hello World via JSON (<a href="hwJSON.php">outils/hwJSON.php</a>) avec une seule variable : {{post2}}</li>
       </ul>
   </div>
<script>
var app = angular.module("MyApp", []);

app.controller("OneVariable", function($scope, $http) {
    $http.get('https://www.0rion.netlib.re/outils/hwJSON.php').then(
	    function(response) {
	      $scope.posts2 = response.data;
    	}
    );
});
</script>
</BODY></html>



Example with OLD method (the first) and with NEW method (the second)

Code : Tout sélectionner

<html><HEADER></HEADER>
<script src="https://www.0rion.netlib.re/libs/angularjs/1.2.14/angular.min.js"></script>   
<BODY ng-app="MyApp">
<h2>Via AngularJS (<a href="https://docs.angularjs.org/api/ng/service/$http">$http.get</a>)</h2>

<div ng-controller="OneVariable">
       <ul ng-repeat="post in posts">
         <li>test de Hello World via JSON (<a href="hwJSON.php">outils/hwJSON.php</a>) avec une seule variable : {{post}}</li>
       </ul>
        <ul ng-repeat="post2 in posts2">
         <li>test de Hello World via JSON (<a href="hwJSON.php">outils/hwJSON.php</a>) avec une seule variable : {{post2}}</li>
       </ul>
   </div>
<script>
var app = angular.module("MyApp", []);

/*   OLD METHOD https://docs.angularjs.org/api/ng/service/$http#deprecation-notice		*/

app.controller("OneVariable", function($scope, $http) {
  $http.get('https://www.0rion.netlib.re/outils/hwJSON.php').
    success(function(data, status, headers, config) {
      $scope.posts = data;
    }).
    error(function(data, status, headers, config) {
      // log error
    });

/*	NEW	METHOD https://docs.angularjs.org/api/ng/service/$http#shortcut-methods	*/

    $http.get('https://www.0rion.netlib.re/outils/hwJSON.php').then(
	    function(response) {
	      $scope.posts2 = response.data;
    	}
    );
});
</script>
</BODY></html>
Modifié en dernier par voxdemonix le lun. déc. 28, 2015 2:17 pm, modifié 12 fois.
~ Infernalis Creatorem ~
  • Rejoins le côté obscure, on a des cookies !
Donation Bitcoin : 1N8QGrhJGWdZNQNSspm3rSGjtXaXv9Ngat
Donation Dash : XmowiBRku3tsEREp7PhpheY4TgeLLDyKdM

Avatar du membre
voxdemonix
Messages : 1237
Enregistré le : lun. févr. 02, 2015 7:28 pm

Re: [Ajax] Hello World

Message par voxdemonix » sam. avr. 11, 2015 1:27 am

[_lolycat_] [PHP] via file_get_contents()& json_decode()
[flagFR] Récupérer valeur via requete HTTP(s) format JSON et afficher les valeurs et clefs ; la fonction json_decode() va permettre de tranformer le json en tableau associatif (clefs=>valeur).
[flagEN] Recover value via HTTP(s) 's request JSON format and display key and value : the function json_decode() transform the JSON in associative table (key=>value).

Code : Tout sélectionner

<?php
$url='https://www.0rion.netlib.re/outils/hw2JSON.php';
$contents = file_get_contents($url);
$contents = utf8_encode($contents);
$results = json_decode($contents, JSON_NUMERIC_CHECK); 

    foreach($results as $clefs=>$valeur){ 
        echo '<br /> key : '.$clefs.' value :'.$valeur; 
    }
?>
[flagFR] Idem en une ligne
[flagEN] Same in One line

Code : Tout sélectionner

<?php    foreach(json_decode(    utf8_encode(    file_get_contents(    'https://www.0rion.netlib.re/outils/hw2JSON.php'    )    )    ) as $k=>$v){    echo '<br /> key : '.$k.' value :'.$v; }     ?>
Modifié en dernier par voxdemonix le mer. déc. 09, 2015 1:38 pm, modifié 1 fois.
~ Infernalis Creatorem ~
  • Rejoins le côté obscure, on a des cookies !
Donation Bitcoin : 1N8QGrhJGWdZNQNSspm3rSGjtXaXv9Ngat
Donation Dash : XmowiBRku3tsEREp7PhpheY4TgeLLDyKdM

Avatar du membre
voxdemonix
Messages : 1237
Enregistré le : lun. févr. 02, 2015 7:28 pm

Re: [Ajax] Hello World

Message par voxdemonix » mer. avr. 29, 2015 3:36 pm

[Javascript] via XMLHtttpRequest & JSON.parse

[flagFR] Récupérer format JSON Afficher le Hello World dans une balise HTML
[flagEN] Recover format JSON and Display the Hello Wold in a HTML tag

Code : Tout sélectionner

<p id="vox"> </p>
<br />
<input type="button" value="test" onclick="recoverHelloWorld()">
<script type="text/javascript"> 
function recoverHelloWorld(){
  var maRequete = new XMLHttpRequest(); //on crée l'objet maRequete
  maRequete.open('GET','https://www.0rion.netlib.re/outils/hwJSON.php',false); //on paramètre l'objet maRequete
  maRequete.send(null); //on execute la requete
  if(200==maRequete.status){
    //connexion ON
    var mesVariables = JSON.parse(maRequete.responseText); //on converti le JSON reçu en objet/tableau utilisable avec javascript
    document.getElementById("vox").innerHTML = mesVariables.test; //on ajoute dans notre balise html le contenu de la cellule 'test'
  }else{
    //erreurs
    document.getElementById("hello").innerHTML = 'Connexion Error';
  }
}
</script>
Demo: ../outils/tryAjax.php
~ Infernalis Creatorem ~
  • Rejoins le côté obscure, on a des cookies !
Donation Bitcoin : 1N8QGrhJGWdZNQNSspm3rSGjtXaXv9Ngat
Donation Dash : XmowiBRku3tsEREp7PhpheY4TgeLLDyKdM

Qui est en ligne

Utilisateurs parcourant ce forum : CommonCrawl [Bot] et 0 invité