Login verbessern mit AJAX/PHP?

Ich habe ein Login gebaut. Jenen sollen wir nun ausschließlich mit AJAX verbessern. (Wir dürfen dabei nicht sowas wie JQUERY verwenden. Das wissen fehlt uns aber dafür an meisten. Vielleicht kann jemand mir dabei helfen mein Login umzubauen und zu verstehen was ich mache.

Mein Login-Quelltext:

<?php
$pdo = new PDO('mysql:host=localhost;dbname=phptest', 'root', '');

if(isset($_GET['login'])) {
  $email = $_POST['Email'];
  $passwort = $_POST['Passwort'];

  $statement = $pdo->prepare("SELECT * FROM login WHERE Email = :Email");
  $result = $statement->execute(array('Email' => $email));
  $user = $statement->fetch();

  //Überprüfung des Passworts
  if ($user !== false && password_verify($passwort, $user['Passwort'])) {
    $_SESSION['userid'] = $user['ID'];
    die('Login erfolgreich. Weiter zu <a href="index.php?site=Startseite">internen Bereich</a>');
  } else {
    $errorMessage = "E-Mail oder Passwort war ungültig<br>";
  }

}
?>
<!DOCTYPE html>
<html>
<head>
  <title>Login</title>
</head>
<body>

<?php
if(isset($errorMessage)) {
  echo $errorMessage;
}
?>

<form action="Loginseite.php?login=1" method="post">
  E-Mail:<br>
  <input type="email" size="40" maxlength="250" name="Email" required><br><br>

  Dein Passwort:<br>
  <input type="password" size="40" maxlength="250" name="Passwort" required><br>

  <input type="submit" value="Login">
</form>
</body>
</html>
Computer, HTML, programmieren, JavaScript, AJAX, PHP, Webdesign
JS ARRAYS + RECHNEN?

Also ich habe ein Programm wo man per Knopfdruck über einen Prompt etwas schreiben kann und das steht dann im Array, aber es soll so sein das wenn man auf einen anderen Button drückt ein Allert kommt in dem steht wie viel alles zusammen ist also ich möchte es + rechnen.

Falls es hilfreich ist hier mein Code:

<html>

<head>

  <meta charset="utf-8" />

</head>

<body>

  <h1>Stromverbrauch</h1>

  <button onclick="addNewItem(); updateList();">Neuen Verbrauch hinzufügen</button>

  <ul id="list">

  </ul>

  <script>

    let shoppingItems = getShoppingItemsFromLocalStorage();

    updateList();

    function getShoppingItemsFromLocalStorage() {

      let items = localStorage.getItem('shoppingItems');

      if (items == null || items == '') {

        items = [];

      } else {

        items = items.split(',');

      }

      return items;

    }

    function addNewItem() {

      let item = prompt('Welchen Verbrauch hast du?');

      if (item != null) {

        shoppingItems.push(item);

        localStorage.setItem('shoppingItems', shoppingItems);

      }

    }

    function removeItem(itemIndex) {

      shoppingItems.splice(itemIndex, 1);

      localStorage.setItem('shoppingItems', shoppingItems);

    }

    function updateList() {

      document.getElementById('list').innerHTML = '';

      for (let index = 0; index < shoppingItems.length; index += 1) {

        document.getElementById('list').innerHTML += '<li>' + shoppingItems[index] +

        ' <button onclick="removeItem(' + index + '); updateList();">X</button></li>';

      }

    }

  </script>

</body>

</html>

Computer, programmieren, JavaScript, Informatik

Meistgelesene Beiträge zum Thema JavaScript