SHARE
TWEET

Untitled

a guest May 23rd, 2019 69 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  5.  
  6.     <title>Formulari amb Ajax made in china</title>
  7. </head>
  8. <body>
  9. <style type="text/css">
  10.   th {
  11.     background-color: #1400d4;
  12.     color:white;
  13.   }
  14.   tr {
  15.     background-color: #867aff91;
  16.   }
  17.   td {
  18.     padding: 2px;
  19.   }
  20.  
  21. </style>
  22. <strong>Selecciona una consola per a veure m&eacute;s informaci&oacute;.</strong><br>
  23.   <select name="desplegable" onchange="mostrarInfo(this.value)" id="desplegable">
  24.    
  25.   </select>
  26.  
  27.   <div id="consoleData">
  28.    
  29.   </div>
  30. <table id="consoleTable"></table>
  31.  
  32.  
  33. <script type="text/javascript">
  34.  
  35.   function imprimirTable(xml) {
  36.     var i;
  37.     var xmlDoc = xml.responseXML;
  38.     var table="<tr><th>Orden</th><th>Titulo</th><th>Plataforma</th><th>Genero</th><th>Fecha</th><th>Descripcion</th></tr>";
  39.     var x = xmlDoc.getElementsByTagName("juego");
  40.     for (i = 0; i <x.length; i++) {
  41.       table += "<tr><td>" +
  42.        x[i].getElementsByTagName("orden")[0].childNodes[0].nodeValue +
  43.       "</td><td>" +
  44.        x[i].getElementsByTagName("titulo")[0].childNodes[0].nodeValue +
  45.       "</td><td>" +
  46.        x[i].getElementsByTagName("plataforma")[0].childNodes[0].nodeValue +
  47.       "</td><td>" +
  48.        x[i].getElementsByTagName("genero")[0].childNodes[0].nodeValue +
  49.       "</td><td>" +
  50.        x[i].getElementsByTagName("fecha")[0].childNodes[0].nodeValue +
  51.       "</td><td>" +
  52.        x[i].getElementsByTagName("descripcion")[0].childNodes[0].nodeValue +
  53.       "</td><td>"
  54.   }
  55.   document.getElementById("consoleTable").innerHTML = table;
  56. }
  57.  
  58.   function mostrarInfo(str) {
  59.   var xhttp;
  60.   if (str == "") {
  61.     $("#consoleData").html("");
  62.     return;
  63.   }
  64.   xhttp = new XMLHttpRequest();
  65.   xhttp.onreadystatechange = function() {
  66.     if (this.readyState == 4 && this.status == 200) {
  67.    imprimirTable(this);
  68.     }
  69.   };
  70.   xhttp.open("GET", str, true);
  71.   xhttp.send();
  72. }
  73.  
  74.  
  75.   $(document).ready(function(){       // load jQuery 1.5
  76.   function loadfail(){
  77.   alert("No he pogut llegir el fitxer, quĂ© has fet.");
  78.  }
  79.  
  80.  function parse(document){
  81.  $(document).find("nombre").each(function(){
  82.     var platformOption = $(this).text();
  83.     $('#desplegable').append(
  84.    '<option value="'+ platformOption + '.xml">' + platformOption + '</option>'
  85.     );
  86.  
  87.  });
  88.  }
  89.  
  90.  $.ajax({
  91.   url: 'plataforma.xml',    // name of file with our data - link has been renamed
  92.   dataType: 'xml',    // type of file we will be reading
  93.   success: parse,     // name of function to call when done reading file
  94.   error: loadfail     // name of function to call when failed to read
  95.  });
  96. });
  97.  
  98.  
  99.  
  100. </script>
  101.  
  102.  
  103.  
  104. </body>
  105. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top