Diferència entre revisions de la pàgina «Formats d'intercanvi d'informació. JSON»
Salta a la navegació
Salta a la cerca
| Línia 111: | Línia 111: | ||
</pre> | </pre> | ||
| − | ==AJAX. mysql-php selects. Array PHP a array Javascript (a través de JSON) | + | ==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. | Putting multiple rows into an array. Ho fem fila a fila a través del bucle. | ||
| Línia 184: | Línia 184: | ||
</html> | </html> | ||
</pre> | </pre> | ||
| + | |||
==AJAX. mysql-php selects. Array PHP a array Javascript (a través de JSON)== | ==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) | Fetch all rows into an array (en aquest cas el que retornarà serà un array d'objectes) | ||
Revisió de 17:51, 4 març 2021
Contingut
- 1 Introducció
- 2 Referències
- 3 Exemples incrementals
- 3.1 Conversió d'un objecte PHP a JSON
- 3.2 Conversió de la cadena JSON (objecte) a objecte Javascript
- 3.3 Conversió d'un array PHP a JSON
- 3.4 AJAX. Conversió de la cadena JSON (array) a array Javascript
- 3.5 AJAX. mysql-php selects. Array PHP a array Javascript (a través de JSON)
- 3.6 AJAX. mysql-php selects. Array PHP a array Javascript (a través de JSON)
Introducció
- JSON: JavaScript Object Notation.
- JSON és una sintaxi per emmagatzemar i intercanviar informació textual. També ho és el XML.
- JSON és més mínim que el XML, i més fàcil i ràpid de parsejar.
Referències
- https://www.w3schools.com/js/js_json_intro.asp
- (https://addons.mozilla.org/en-US/developers/docs/sdk/1.13/modules/sdk/request.html)
- http://www.jsonexample.com/
- http://json.org/example.html
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
