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

2021-03-04T17:51:42Z

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

Joan: /* Exemples incrementals */

2020-02-11T18:22:15Z

Exemples incrementals

Pàgina nova

=Introducció=
*'''JSON''': '''J'''ava'''S'''cript '''O'''bject '''N'''otation.
*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)
*http://www.javascriptkit.com/dhtmltutors/ajaxgetpost4.shtml
exemple JQuery:
*http://api.jquery.com/jQuery.getJSON/
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.
*http://www.tutorialswitch.com/web-development/quick-and-simple-ajax-forms-with-json-responses/
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:
*[[Fitxer:Ajax-json.zip]]
==Conversió d'un objecte PHP a JSON==
*https://www.w3schools.com/js/js_json_php.asp
'''ex1.php'''
<pre>
<?php
$myObj = new \stdClass;
$myObj->name = "John";
$myObj->age = 30;
$myObj->city = "New York";

$myJSON = json_encode($myObj);

echo $myJSON;
?>
</pre>

==Conversió de la cadena JSON (objecte) a objecte Javascript==
*https://www.w3schools.com/js/js_json_php.asp
'''ex1.html''':
<pre>
<!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>
</pre>
==Conversió d'un array PHP a JSON==
*https://www.w3schools.com/js/js_json_php.asp
'''ex2.php''':
<pre>
<?php
$myArr = array("John", "Mary", "Peter", "Sally");

$myJSON = json_encode($myArr);

echo $myJSON;
?>
</pre>

==AJAX. Conversió de la cadena JSON (array) a array Javascript==
'''ex2.html''':
<pre>
<!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>

</pre>

==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''':
<pre>
<?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;

?>
</pre>
I la part del client: '''ex_select1.html''':
<pre>
<!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>
</pre>
==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''':
<pre>
<?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;

?>

</pre>
I la part del client: '''ex_select2.html''':
<pre>
<!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>

</pre>
{{Autor}}, febrer 2020
[[Categoria: Institut Jaume Balmes]]
[[Categoria: Assignatura DAW-M06-WEC]]

@@ Línia 111: / Línia 111: @@
 </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.
@@ Línia 184: / Línia 184: @@
 </html>
 </pre>
 ==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)

Formats d'intercanvi d'informació. JSON - Historial de revisió

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

Joan: /* Exemples incrementals */