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

De wikiserver
Dreceres ràpides: navegació, cerca
(Es crea la pàgina amb «<source lang="java"> <!DOCTYPE html> <html> <head> <script> function showHint(str) { var xmlhttp; if (str.length==0) { document.getElementById("txtHint").innerHTML=…».)
 
 
(3 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 6 AJAX</title>
 +
</head>
 +
 +
<body>
 +
    <h1>Exercici 6 AJAX</h1>
 +
    <input type="text" id="input"></input>
 +
    <br>Suggeriments:
 +
    <div id="contingut"></div>
 +
 +
    <script lang="javascript">
 +
        var xhr = new XMLHttpRequest();
 +
 +
        var contingut = document.getElementById("contingut");
 +
        var input = document.getElementById("input");
 +
 +
        input.oninput = function () {
 +
            xhr.open("GET", "ex6.php?q=" + input.value);
 +
            xhr.send(null);
 +
        };
 +
 +
        xhr.onreadystatechange = function () {
 +
            if (xhr.readyState == 4 && xhr.status == 200) {
 +
                contingut.innerHTML = xhr.responseText;
 +
            }
 +
        };
 +
    </script>
 +
</body>
 +
 +
</html>
 +
</source>
 +
 +
//fitxer php
 +
<source lang="java">
 +
<?php
 +
// Array with names
 +
$a = array("Anna", "Brittany", "Cinderella", "Diana", "Eva", "Fiona", "Gunda", "Hege", "Inga", "Johanna", "Kitty", "Linda", "Nina", "Ophelia", "Petunia", "Amanda", "Raquel", "Cindy", "Doris", "Eve", "Evita", "Sunniva", "Tove", "Unni", "Violet", "Liza", "Elizabeth", "Ellen", "Wenche", "Vicky");
 +
 +
// get the q parameter from URL
 +
$q = $_REQUEST["q"];
 +
 +
$hint = "";
 +
 +
// lookup all hints from array if $q is different from ""
 +
if ($q !== "") {
 +
    $q = strtolower($q);
 +
    $len = strlen($q);
 +
    foreach ($a as $name) {
 +
        if (stristr($q, substr($name, 0, $len))) {
 +
            if ($hint === "") {
 +
                $hint = $name;
 +
            } else {
 +
                $hint .= "<br>$name";
 +
            }
 +
        }
 +
    }
 +
}
 +
 +
// Output "no suggestion" if no hint was found or output correct values
 +
echo $hint === "" ? "no suggestion" : $hint;
 +
 +
</source>
 +
 +
<!--
 
<source lang="java">
 
<source lang="java">
  
Línia 56: Línia 128:
 
</source>
 
</source>
  
 +
 +
//fitxer php
 
<source lang="java">
 
<source lang="java">
 
<?php
 
<?php
Línia 97: Línia 171:
  
 
// get the q parameter from URL
 
// get the q parameter from URL
$q=$_REQUEST["q"]; $hint="";
+
$q=$_REQUEST["q"];  
 +
$hint="";
  
 
// lookup all hints from array if $q is different from ""
 
// lookup all hints from array if $q is different from ""
 
if ($q !== "")
 
if ($q !== "")
   { $q=strtolower($q); $len=strlen($q);
+
   { $q=strtolower($q);  
 +
    $len=strlen($q);
 
     foreach($a as $name)
 
     foreach($a as $name)
 
     { if (stristr($q, substr($name,0,$len)))
 
     { if (stristr($q, substr($name,0,$len)))
Línia 117: Línia 193:
 
?>  
 
?>  
 
</source>
 
</source>
 +
-->

Revisió de 15:41, 9 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 6 AJAX</title>
</head>

<body>
    <h1>Exercici 6 AJAX</h1>
    <input type="text" id="input"></input>
    <br>Suggeriments:
    <div id="contingut"></div>

    <script lang="javascript">
        var xhr = new XMLHttpRequest();

        var contingut = document.getElementById("contingut");
        var input = document.getElementById("input");

        input.oninput = function () {
            xhr.open("GET", "ex6.php?q=" + input.value);
            xhr.send(null);
        };

        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                contingut.innerHTML = xhr.responseText;
            }
        };
    </script>
</body>

</html>

//fitxer php

<?php
// Array with names
$a = array("Anna", "Brittany", "Cinderella", "Diana", "Eva", "Fiona", "Gunda", "Hege", "Inga", "Johanna", "Kitty", "Linda", "Nina", "Ophelia", "Petunia", "Amanda", "Raquel", "Cindy", "Doris", "Eve", "Evita", "Sunniva", "Tove", "Unni", "Violet", "Liza", "Elizabeth", "Ellen", "Wenche", "Vicky");

// get the q parameter from URL
$q = $_REQUEST["q"];

$hint = "";

// lookup all hints from array if $q is different from ""
if ($q !== "") {
    $q = strtolower($q);
    $len = strlen($q);
    foreach ($a as $name) {
        if (stristr($q, substr($name, 0, $len))) {
            if ($hint === "") {
                $hint = $name;
            } else {
                $hint .= "<br>$name";
            }
        }
    }
}

// Output "no suggestion" if no hint was found or output correct values
echo $hint === "" ? "no suggestion" : $hint;