Formats d'intercanvi d'informació. JSON

De Wikijoan
Dreceres ràpides: navegació, cerca

Contingut

Introducció

Referències

AJAX i JSON

exemple nadiu vist a classe: (fitxer javascriptkit.html i javascriptkit.json)

exemple JQuery:

En el següent enllaç podem veure que els fitxers XML es poden traduir a sintaxi JSON. Tanmateix, quan els fitxers XML es compliquen, el seu equivalent JSON passa a ser bastant difícil de llegir i interpretar.

Com a regla general, podem fer servir JSON quan la informació que volem emmagatzemar i parsejar sigui fàcil d'interpretar.


A classe s'han vist els anteriors enllaços i s'han explicat i provat els exemplest continguts. Es dóna especial ènfasi a utilitzar JSON en l'intercanvi d'informació entre el client i el servidor en les crides asíncrones AJAX, que és del que s'ocupa l'actual Unitat Formativa.

Els següents trossos de codi són especialment rellevants:

Exemples incrementals

Descarrega tots els fitxers:

Conversió d'un objecte PHP a JSON

ex1.php

<?php
$myObj = new \stdClass; 
$myObj->name = "John";
$myObj->age = 30;
$myObj->city = "New York";

$myJSON = json_encode($myObj);

echo $myJSON;
?>

Conversió de la cadena JSON (objecte) a objecte Javascript

ex1.html:

<!DOCTYPE html>
<html>
<body>

<h2>Get data as JSON from a PHP file on the server.</h2>

<p id="demo"></p>

<script>
var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    myObj = JSON.parse(this.responseText);
    document.getElementById("demo").innerHTML = myObj.name;
  }
};
xmlhttp.open("GET", "ex1.php", true);
xmlhttp.send();
</script>

</body>
</html>

Conversió d'un array PHP a JSON

ex2.php:

<?php
$myArr = array("John", "Mary", "Peter", "Sally");

$myJSON = json_encode($myArr);

echo $myJSON;
?>

AJAX. Conversió de la cadena JSON (array) a array Javascript

ex2.html:

<!DOCTYPE html>
<html>
<body>

<h2>Get data as JSON from a PHP file, and convert it into a JavaScript array.</h2>

<p id="demo"></p>

<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var myArr = JSON.parse(this.responseText);
    document.getElementById("demo").innerHTML = myArr[2];
  }
};
xmlhttp.open("GET", "ex2.php", true);
xmlhttp.send();
</script>

</body>
</html>

AJAX. mysql-php selects. Array PHP a array Javascript (a través de JSON)=

Putting multiple rows into an array. Ho fem fila a fila a través del bucle.

ex_select1.php:

<?php
$conn = new mysqli("localhost", "alumne", "keiL2lai", "municipis");
mysqli_set_charset($conn, "utf8");
/* check connection */
if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
}

$query = "SELECT id_com, comunitat from comunitats";
$result = $conn->query($query);

while($row = $result->fetch_array())
{
$rows[] = $row;
}

/*
foreach($rows as $row)
{
echo $row['id_com'].". ".$row['comunitat']."<br />";
}
*/

/* free result set */
$result->close();

/* close connection */
$conn->close();

$myJSON = json_encode($rows);
echo $myJSON;

?>

I la part del client: ex_select1.html:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</head>
<html>
<body>

<h2>Get data as JSON from a PHP file (dades que vénen d'una select)</h2>

<p id="demo"></p>

<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var myArr = JSON.parse(this.responseText);
    var val = "<ul>";
    myArr.forEach(function (valor) {
		val += "<li>" + valor[0] + ". " + valor[1] + "</li>";
	});
    val += "</ul>";
    document.getElementById("demo").innerHTML = val;
  }
};
xmlhttp.open("GET", "ex_select1.php", true);
xmlhttp.send();
</script>

</body>
</html>

AJAX. mysql-php selects. Array PHP a array Javascript (a través de JSON)

Fetch all rows into an array (en aquest cas el que retornarà serà un array d'objectes)

ex_select2.php:

<?php
$conn = new mysqli("localhost", "alumne", "keiL2lai", "municipis");
mysqli_set_charset($conn, "utf8");
/* check connection */
if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
}

$query = "SELECT id_com, comunitat from comunitats";
$result = $conn->query($query);

// Fetch all
$allrows = mysqli_fetch_all($result, MYSQLI_ASSOC);


/*
foreach($allrows as $row)
{
echo $row['id_com'].". ".$row['comunitat']."<br />";
}
*/

/* free result set */
$result->close();

/* close connection */
$conn->close();

$myJSON = json_encode($allrows);
echo $myJSON;

?>

I la part del client: ex_select2.html:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</head>
<html>
<body>

<h2>Get data as JSON from a PHP file (dades que vénen d'una select)</h2>

<p id="demo"></p>

<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var myArr = JSON.parse(this.responseText);
    var val = "<ul>";
    myArr.forEach(function (valor) {
		val += "<li>" + valor.id_com + ". " + valor.comunitat + "</li>";
	});
    val += "</ul>";
    document.getElementById("demo").innerHTML = val;
  }
};
xmlhttp.open("GET", "ex_select2.php", true);
xmlhttp.send();
</script>

</body>
</html>


creat per Joan Quintana Compte, febrer 2020

Eines de l'usuari
Espais de noms
Variants
Accions
Navegació
Institut Jaume Balmes
Màquines recreatives
CNC
Informàtica musical
joanillo.org Planet
Eines