Diferència entre revisions de la pàgina «Solució exercici3-ajax»

De wikiserver
Dreceres ràpides: navegació, cerca
 
(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", "ex4.php?q=" + ciutat.value);
+
             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(nouItem);
+
                     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>