Exercici 4
De wikiserver
Programa de client exercici4.html amb objecte XMLHtmlRequest
<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>Programa de client exercici4.html amb FETCH
<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>
</html>Programa de client exercici4.html amb AXIOS
<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>
</html>
