Diferència entre revisions de la pàgina «Solució exercici3-ajax»
De wikiserver
| (Hi ha 5 revisions intermèdies del mateix usuari que no es mostren) | |||
| Línia 1: | Línia 1: | ||
| + | Fitxer html: | ||
| + | |||
| + | <source lang="java"> | ||
| + | |||
| + | <!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> | ||
| + | </source> | ||
| + | |||
| + | <!-- | ||
//hacer en firefox | //hacer en firefox | ||
| Línia 6: | Línia 72: | ||
function peticionAjax(codigo, ciudad){ | function peticionAjax(codigo, ciudad){ | ||
| − | + | if (window.XMLHttpRequest) { //Tots els altres navegadors que soporten ajax | |
| − | |||
| − | |||
| − | |||
xhr = new XMLHttpRequest(); | xhr = new XMLHttpRequest(); | ||
} | } | ||
| Línia 169: | Línia 232: | ||
?> | ?> | ||
</source> | </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>
