====== AJAX ====== Asynchronous JavaScript and XML. Used for sending HTTP requests without having to reload the page or without it redirecting you to a new page. Very useful for dynamic changing of certain content on a page without having to refresh. Can be used to dynamically get suggestions for what you're typing. {{:programmieren:javascript:ajax_php.png?400|}} done with this example code:








Start typing a name in the input field below:

  First name:
  

Suggestions:

gethint.php looks like this:


// Array with names
$a[] = "Anna";
$a[] = "Brittany";
$a[] = "Cinderella";
$a[] = "Diana";
$a[] = "Eva";
$a[] = "Fiona";
$a[] = "Gunda";
$a[] = "Hege";
$a[] = "Inga";
$a[] = "Johanna";
$a[] = "Kitty";
$a[] = "Linda";
$a[] = "Nina";
$a[] = "Ophelia";
$a[] = "Petunia";
$a[] = "Amanda";
$a[] = "Raquel";
$a[] = "Cindy";
$a[] = "Doris";
$a[] = "Eve";
$a[] = "Evita";
$a[] = "Sunniva";
$a[] = "Tove";
$a[] = "Unni";
$a[] = "Violet";
$a[] = "Liza";
$a[] = "Elizabeth";
$a[] = "Ellen";
$a[] = "Wenche";
$a[] = "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 .= ", $name";
      }
    }
  }
}

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

I used AJAX in PR-002 which was all about asynchronous requests.


$(document).ready(function () {
    displayEntries()
    $("#submitButton").click(function (event) {
        event.preventDefault();

        let validationElement = document.getElementById("validation");
        if (validationElement !== null) {
            validationElement.remove();
        }

        let form = $("#form");
        let url = form.attr('action');

        let formData = form.serialize()

        $.ajax({
            type: "POST",
            url: url,
            data: formData,
            success: function (data) {
                if (data === "" || data === null) {
                    displayEntries();
                }
                let parsedData = JSON.parse(data);
                let txt = document.createElement("p");
                txt.setAttribute("id", "validation");
                txt.setAttribute("style", "color: red");
                txt.innerHTML = parsedData;
                $("form").after(txt);
            }
        });
    });
});

I used ajax with jQuery which made it alot easier to use. In this script I'm displaying validation errors if any of them exist and saving the posted data. Im also calling ''displayEntries()'' which I'll show now:


function displayEntries() {
    $.ajax({
        type: "GET",
        url: "db.php",
        success: function (data) {
            let placeholder = document.getElementById("placeholder");
            if (placeholder !== null) {
                placeholder.remove();
            }

            let entryList = document.getElementById("entryList");
            entryList.innerHTML = "";

            let parsedEntries = JSON.parse(data);
            for (const fields of parsedEntries) {
                let entry = document.createElement("div");
                entry.setAttribute(
                    "style",
                    "display: flex;" +
                    " flex-direction: row;" +
                    " border: 1px solid grey;" +
                    " border-radius: 10px;" +
                    " justify-content: center;"
                );
                let title = document.createElement("p");
                let description = document.createElement("p");
                let date = document.createElement("p");
                title.setAttribute("style", "width: 33%");
                description.setAttribute("style", "width: 33%;" +
                    " text-overflow: ellipsis;" +
                    " overflow: clip;");
                date.setAttribute("style", "width: 33%");

                title.innerHTML = fields[1];
                description.innerHTML = fields[2];
                date.innerHTML = fields[3];

                $(entry).appendTo("#entryList");
                $(title).appendTo(entry);
                $(description).appendTo(entry);
                $(date).appendTo(entry);
            }
        }
    });
}

Here I asynchronously get all entries from the database and display them in a list. This is called when reloading the page and when adding a new entry. But it can probably later be used with edit and delete too. The whole making elements and allat is a bit bad rn but ehhh.