Diferència entre revisions de la pàgina «Solució exercici3-ajax»
De wikiserver
| (Hi ha 2 revisions intermèdies del mateix usuari que no es mostren) | |||
| Línia 1: | Línia 1: | ||
Fitxer html: | Fitxer html: | ||
| + | |||
| + | <source lang="java"> | ||
<!DOCTYPE html> | <!DOCTYPE html> | ||
| Línia 36: | Línia 38: | ||
var xhr = new XMLHttpRequest(); | var xhr = new XMLHttpRequest(); | ||
ciutat.onchange = function () { | ciutat.onchange = function () { | ||
| − | xhr.open("GET", " | + | xhr.open("GET", "exercici4.php?q=" + ciutat.value); |
xhr.send(null); | xhr.send(null); | ||
}; | }; | ||
| Línia 50: | Línia 52: | ||
var nodeText = document.createTextNode(_barri); | var nodeText = document.createTextNode(_barri); | ||
nouElement.appendChild(nodeText); | nouElement.appendChild(nodeText); | ||
| − | barri.appendChild( | + | barri.appendChild(nouElement); |
}) | }) | ||
} | } | ||
| Línia 60: | Línia 62: | ||
</html> | </html> | ||
| + | </source> | ||
<!-- | <!-- | ||
Revisió de 17:32, 12 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", "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(",");
arr_barris.forEach((_barri) => {
var nouElement = document.createElement("option");
var nodeText = document.createTextNode(_barri);
nouElement.appendChild(nodeText);
barri.appendChild(nouElement);
})
}
};
</script>
</body>
</html>
