Diferència entre revisions de la pàgina «Solució exercici3-ajax»
De wikiserver
Línia 1: | Línia 1: | ||
Fitxer html: | Fitxer html: | ||
+ | |||
+ | <source lang="java"> | ||
<!DOCTYPE html> | <!DOCTYPE html> | ||
Línia 60: | Línia 62: | ||
</html> | </html> | ||
+ | </source> | ||
<!-- | <!-- |
Revisió del 15:29, 9 abr 2024
Fitxer html:
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercici 4 AJAX</title>
</head>
<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", "ex4.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(",");
arr_barris.forEach((_barri) => {
var nouElement = document.createElement("option");
var nodeText = document.createTextNode(_barri);
nouElement.appendChild(nodeText);
barri.appendChild(nouItem);
})
}
};
</script>
</body>
</html>