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

De wikiserver
Dreceres ràpides: navegació, cerca
(Es crea la pàgina amb «Fitxer javascript: <pre> var xhr; function peticionAjax(codigo, ciudad){ if (window.ActiveXObject) { //Iexplorer xhr = new ActiveXObject("Microsoft.XMLH…».)
 
 
(7 revisions intermèdies per 2 usuaris 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
 +
 
Fitxer javascript:
 
Fitxer javascript:
−
<pre>
+
<source lang="java">
 
var xhr;
 
var xhr;
  
 
function peticionAjax(codigo, ciudad){
 
function peticionAjax(codigo, ciudad){
−
    if (window.ActiveXObject) { //Iexplorer
+
     if (window.XMLHttpRequest) { //Tots els altres navegadors que soporten ajax
−
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
 
−
     }
 
−
    else if (window.XMLHttpRequest) { //Tots els altres navegadors que soporten ajax
 
 
             xhr = new XMLHttpRequest();
 
             xhr = new XMLHttpRequest();
 
     }
 
     }
Línia 44: Línia 109:
  
 
window.onload = inici;
 
window.onload = inici;
−
</pre>
+
</source>
  
 
Fitxer HTML:
 
Fitxer HTML:
−
<pre>
+
<source lang="html">
 
<!DOCTYPE html>
 
<!DOCTYPE html>
 
<html>
 
<html>
Línia 60: Línia 125:
 
     </body>
 
     </body>
 
</html>
 
</html>
−
</pre>
+
</source>
  
 
Fitxer PHP:
 
Fitxer PHP:
−
<pre>
+
<source lang="php">
 
<?php
 
<?php
 
function checkPost(){
 
function checkPost(){
Línia 166: Línia 231:
 
checkPost();
 
checkPost();
 
?>
 
?>
−
</pre>
+
</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>


Obtingut de «http://wikiserver.infomerce.es/index.php?title=Solució_exercici3-ajax&oldid=17949»