Exercici 4 - Historial de revisió

Jcomas: /* Programa de servidor exercici4.php */

2023-04-14T16:18:46Z

‎Programa de servidor exercici4.php

Jcomas a 10:34, 7 abr 2022

2022-04-07T10:34:57Z

Jcomas: /* Programa de client exercici4.html amb objecte XMLHtmlRequest */

2022-04-07T10:34:30Z

‎Programa de client exercici4.html amb objecte XMLHtmlRequest

Jcomas a 10:32, 7 abr 2022

2022-04-07T10:32:53Z

Jcomas: /* Programa de client exercici4.html amb objecte XMLHtmlRequest */

2022-04-07T10:22:23Z

‎Programa de client exercici4.html amb objecte XMLHtmlRequest

Jcomas: Es crea la pàgina amb «== Programa de servidor '''exercici4.php''' == array("Ciutat Vella", "Eixample", "Sants-Montuïc","Les Corts","Gr...».

2022-04-07T09:31:06Z

Es crea la pàgina amb «== Programa de servidor '''exercici4.php''' == <source lang=php> <?php $barri = array("barcelona"=>array("Ciutat Vella", "Eixample", "Sants-Montuïc","Les Corts","Gr...».

Pàgina nova

== Programa de servidor '''exercici4.php''' ==

<source lang=php>
<?php

$barri = array("barcelona"=>array("Ciutat Vella", "Eixample", "Sants-Montuïc","Les Corts","Gràcia"),
"madrid"=>array("Centro","Arganzuela","Retiro","Salamanca","Chamartín","Tetuán"),
"sevilla" => array("Casco antiguo","Nervión","Sur","Triana","Norte"),
"lacoruna" => array("Agra del Orzán","Ensanche","Monte Alto","Pescadería")
);

$q = $_REQUEST["q"];

echo "---------,".implode(",",$barri[$q]);

?>
</source>

== Programa de client '''exercici4.html''' amb objecte XMLHtmlRequest ==

<source lang=javascript>
<html>
<body>
<h1>exercici 4 AJAX</h1>

<label>Escull una ciutat:</label>

<select name="ciutat" id="ciutat">
<option value="-">---------</option>
<option value="barcelona">Barcelona</option>
<option value="lacoruna">La Coruña</option>
<option value="madrid">Madrid</option>
<option value="sevilla">Sevilla</option>
</select>
<br><br>
<label>Escull un barri:</label>
<select name="barri" id="barri">
<option value="-">---------</option>
</select>

<script lang="javascript">

var ciutat=document.getElementById("ciutat");
var barri=document.getElementById("barri");

var xhr=new XMLHttpRequest();
ciutat.onchange=function () {
xhr.open("GET","exercici4.php?q="+ciutat.value);
xhr.send(null);
};

xhr.onreadystatechange=function (){

barri.innerHTML="";

if(xhr.readyState==4 && xhr.status==200) {
var arr_barris=(xhr.responseText).split(",");

for(var _barri of arr_barris) {
var opt=document.createElement("option");
var opt_text=document.createTextNode(_barri);
opt.appendChild(opt_text);
barri.appendChild(opt);
}
}
};

</script>

</body>
</html>

</source>

← Versió més antiga		Revisió del 16:18, 14 abr 2023
Línia 1:		Línia 1:
−	~~== Programa de servidor '''exercici4.php''' ==~~
−
−	~~<source lang=php>~~
−	~~<?php~~
−
−	~~$barri = array("barcelona"=>array("Ciutat Vella", "Eixample", "Sants-Montuïc","Les Corts","Gràcia"),~~
−	~~"madrid"=>array("Centro","Arganzuela","Retiro","Salamanca","Chamartín","Tetuán"),~~
−	~~"sevilla" => array("Casco antiguo","Nervión","Sur","Triana","Norte"),~~
−	~~"lacoruna" => array("Agra del Orzán","Ensanche","Monte Alto","Pescadería")~~
−	);
−
−	~~$q = $_REQUEST["q"];~~
−
−	~~echo "---------,".implode(",",$barri[$q]);~~
−
−	?>
−	~~</source>~~
−
	== Programa de client '''exercici4.html''' amb objecte XMLHtmlRequest ==		== Programa de client '''exercici4.html''' amb objecte XMLHtmlRequest ==

@@ Línia 78: / Línia 78: @@
 == Programa de client '''exercici4.html''' amb FETCH ==
-<source lang=javascript>
+<source lang=html>
 <html>
 <body>
@@ Línia 139: / Línia 139: @@
 == Programa de client '''exercici4.html''' amb AXIOS ==
-<source lang=javascript>
+<source lang=html>
 <html>
 <body>

@@ Línia 73: / Línia 73: @@
 </body>
 </html>
 </source>
@@ Línia 134: / Línia 133: @@
 </body>
 </source>
@@ Línia 189: / Línia 189: @@
 </body>
 </source>

← Versió més antiga		Revisió del 10:22, 7 abr 2022
Línia 74:		Línia 74:
	</html>		</html>

		+
		+	</source>
		+
		+	== Programa de client '''exercici4.html''' amb FETCH ==
		+
		+	<source lang=javascript>
		+	<html>
		+	<body>
		+	<h1>exercici 4 AJAX</h1>
		+
		+	<label>Escull una ciutat:</label>
		+
		+	<select name="ciutat" id="ciutat">
		+	<option value="-">---------</option>
		+	<option value="barcelona">Barcelona</option>
		+	<option value="lacoruna">La Coruña</option>
		+	<option value="madrid">Madrid</option>
		+	<option value="sevilla">Sevilla</option>
		+	</select>
		+	<br><br>
		+	<label>Escull un barri:</label>
		+	<select name="barri" id="barri">
		+	<option value="-">---------</option>
		+	</select>
		+
		+	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		+	<script lang="javascript">
		+
		+	var ciutat=document.getElementById("ciutat");
		+	var barri=document.getElementById("barri");
		+	ciutat.onchange=function () {
		+
		+	fetch("exercici4.php?q="+ciutat.value)
		+	.then( function(response){
		+	if(response.ok) {
		+	return response.text()
		+	} else {
		+	throw "Error a la crida Ajax";
		+	}
		+	})
		+	.then(function(responseText){
		+	barri.innerHTML="";
		+	var arr_barris=(responseText).split(",");
		+
		+	for(var _barri of arr_barris) {
		+	var opt=document.createElement("option");
		+	var opt_text=document.createTextNode(_barri);
		+	opt.appendChild(opt_text);
		+	barri.appendChild(opt);
		+	}
		+	})
		+	.catch(function(err) {
		+	console.log(err);
		+	});
		+
		+	};
		+
		+	</script>
		+
		+	</body>
		+
		+	</source>
		+
		+	== Programa de client '''exercici4.html''' amb AXIOS ==
		+
		+	<source lang=javascript>
		+	<html>
		+	<body>
		+	<h1>exercici 4 AJAX</h1>
		+
		+	<label>Escull una ciutat:</label>
		+
		+	<select name="ciutat" id="ciutat" onchange="canvi_ciutat()">
		+	<option value="-">---------</option>
		+	<option value="barcelona">Barcelona</option>
		+	<option value="lacoruna">La Coruña</option>
		+	<option value="madrid">Madrid</option>
		+	<option value="sevilla">Sevilla</option>
		+	</select>
		+	<br><br>
		+	<label>Escull un barri:</label>
		+	<select name="barri" id="barri">
		+	<option value="-">---------</option>
		+	</select>
		+
		+	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		+	<script lang="javascript">
		+
		+	var ciutat=document.getElementById("ciutat");
		+	var barri=document.getElementById("barri");
		+	ciutat.onchange=canvi_ciutat;
		+
		+	function canvi_ciutat() {
		+
		+	axios.get("exercici4.php?q="+ciutat.value)
		+	.then(function(response){
		+	barri.innerHTML="";
		+	var arr_barris=(response.data).split(",");
		+
		+	for(var _barri of arr_barris) {
		+	var opt=document.createElement("option");
		+	var opt_text=document.createTextNode(_barri);
		+	opt.appendChild(opt_text);
		+	barri.appendChild(opt);
		+	}
		+	})
		+	.catch(function(err) {
		+	console.log(err);
		+	});
		+
		+	}
		+
		+	</script>
		+
		+	</body>

	</source>		</source>