Diferència entre revisions de la pàgina «Exercici 4»

De wikiserver
Dreceres ràpides: navegació, cerca
(Es crea la pàgina amb «== Programa de servidor '''exercici4.php''' == <source lang=php> <?php $barri = array("barcelona"=>array("Ciutat Vella", "Eixample", "Sants-Montuïc","Les Corts","Gr...».)
 
(→‎Programa de client exercici4.html amb objecte XMLHtmlRequest)
Línia 74: Línia 74:
 
</html>
 
</html>
  
 +
 +
</source>
 +
 +
== Programa de client '''exercici4.html''' amb FETCH ==
 +
 +
<source lang=javascript>
 +
<html>
 +
<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 src="https://unpkg.com/axios/dist/axios.min.js"></script>
 +
<script lang="javascript">
 +
 +
var ciutat=document.getElementById("ciutat");
 +
var barri=document.getElementById("barri");
 +
ciutat.onchange=function () {
 +
 +
  fetch("exercici4.php?q="+ciutat.value)
 +
    .then(  function(response){
 +
                if(response.ok) {
 +
                    return response.text()
 +
                } else {
 +
                    throw "Error a la crida Ajax";
 +
                }
 +
            })
 +
    .then(function(responseText){
 +
      barri.innerHTML="";
 +
      var arr_barris=(responseText).split(",");
 +
 +
      for(var _barri of arr_barris) {
 +
        var opt=document.createElement("option");
 +
        var opt_text=document.createTextNode(_barri);
 +
        opt.appendChild(opt_text);
 +
        barri.appendChild(opt);
 +
      }
 +
    })
 +
    .catch(function(err) {
 +
        console.log(err);
 +
    });
 +
 +
  };
 +
 +
</script>
 +
 +
</body>
 +
 +
</source>
 +
 +
== Programa de client '''exercici4.html''' amb AXIOS ==
 +
 +
<source lang=javascript>
 +
<html>
 +
<body>
 +
<h1>exercici 4 AJAX</h1>
 +
 +
<label>Escull una ciutat:</label>
 +
 +
<select name="ciutat" id="ciutat" onchange="canvi_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 src="https://unpkg.com/axios/dist/axios.min.js"></script>
 +
<script lang="javascript">
 +
 +
var ciutat=document.getElementById("ciutat");
 +
var barri=document.getElementById("barri");
 +
ciutat.onchange=canvi_ciutat;
 +
 +
function canvi_ciutat() {
 +
 +
  axios.get("exercici4.php?q="+ciutat.value)
 +
    .then(function(response){
 +
      barri.innerHTML="";
 +
      var arr_barris=(response.data).split(",");
 +
 +
      for(var _barri of arr_barris) {
 +
        var opt=document.createElement("option");
 +
        var opt_text=document.createTextNode(_barri);
 +
        opt.appendChild(opt_text);
 +
        barri.appendChild(opt);
 +
      }
 +
    })
 +
    .catch(function(err) {
 +
        console.log(err);
 +
    });
 +
 +
  }
 +
 +
</script>
 +
 +
</body>
  
 
</source>
 
</source>

Revisió del 12:22, 7 abr 2022

Programa de servidor exercici4.php

<?php

$barri = array("barcelona"=>array("Ciutat Vella", "Eixample", "Sants-Montuïc","Les Corts","Gràcia"),
                "madrid"=>array("Centro","Arganzuela","Retiro","Salamanca","Chamartín","Tetuán"),
                "sevilla" => array("Casco antiguo","Nervión","Sur","Triana","Norte"),
                "lacoruna" => array("Agra del Orzán","Ensanche","Monte Alto","Pescadería")
                );

$q = $_REQUEST["q"];

echo "---------,".implode(",",$barri[$q]);

?>

Programa de client exercici4.html amb objecte XMLHtmlRequest

<html>
<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(",");
      
      for(var _barri of arr_barris) {
        var opt=document.createElement("option");
        var opt_text=document.createTextNode(_barri);
        opt.appendChild(opt_text);
        barri.appendChild(opt);
      }
    }
};



</script>

</body>
</html>

Programa de client exercici4.html amb FETCH

<html>
<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 src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script lang="javascript">

var ciutat=document.getElementById("ciutat");
var barri=document.getElementById("barri");
ciutat.onchange=function () {

  fetch("exercici4.php?q="+ciutat.value)
    .then(  function(response){
                if(response.ok) {
                    return response.text()
                } else {
                    throw "Error a la crida Ajax";
                }
            })
    .then(function(responseText){
      barri.innerHTML="";
      var arr_barris=(responseText).split(",");

      for(var _barri of arr_barris) {
        var opt=document.createElement("option");
        var opt_text=document.createTextNode(_barri);
        opt.appendChild(opt_text);
        barri.appendChild(opt);
      }
    })
    .catch(function(err) {
        console.log(err);
    });

  };

</script>

</body>

Programa de client exercici4.html amb AXIOS

<html>
<body>
<h1>exercici 4 AJAX</h1>

<label>Escull una ciutat:</label>

<select name="ciutat" id="ciutat" onchange="canvi_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 src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script lang="javascript">

var ciutat=document.getElementById("ciutat");
var barri=document.getElementById("barri");
ciutat.onchange=canvi_ciutat;

function canvi_ciutat() {

  axios.get("exercici4.php?q="+ciutat.value)
    .then(function(response){
      barri.innerHTML="";
      var arr_barris=(response.data).split(",");

      for(var _barri of arr_barris) {
        var opt=document.createElement("option");
        var opt_text=document.createTextNode(_barri);
        opt.appendChild(opt_text);
        barri.appendChild(opt);
      }
    })
    .catch(function(err) {
        console.log(err);
    });

  }

</script>

</body>
Obtingut de «http://wikiserver.infomerce.es/index.php?title=Exercici_4&oldid=16481»