php in javascript einbinden

Moin, ja ich weiß... ihr helft nicht gerne bei hausaufgaben... kann ich voll verstehen. aber es ist auch mehr eine freiwillige extra-aufgabe ^^.

wir sollen in html eine website erstellen und mit javascript function die website "aufwerteten".
Jetzt wollte ich ein login erschaffen wozu ich mit mysql eine datenbank angelegt habe... wie aber kann ich jetzt auf die zugreifen? ich habe mal versucht php einzubinden... aber bis jetzt ohne erfolg. Gelesen hab ich von ajax. Aber bisjetzt verstehe ich nicht wie ich das zu verwenden habe um meine zwecke damit erfüllen zukönnen.
Javascript:
<div>
    <font size="2em">
        <table>
        <br>
            <tr>
                <td>Nutzername: </td>
                <td><input type="text" id="name" style="font-size: 10"></td>
            </tr>
            <tr>
                <td>Passwort: </td>
                <td><input type="password" id="pw" style="font-size: 10"></td>
            </tr>
            <tr>
                <td><input type="submit" onclick="login()" value="Login"></td>
                <td><input type="submit" onclick="reg()" value="Registrieren"></td>
                <script>
                    function login(){
                        if(document.getElementById("name").value==""){
                        alert("Bitte gültige Daten eingeben!");
                        }else{
                            var name = document.getElementById("name").value;
                            var pw = document.getElementById("pw").value;
                            document.write('<?php  require_once('db_connect.php');
                           
                            $name = $_GET['name'];
                            $pw = $_GET['pw'];
                            $sql = "SELECT * FROM user WHERE name = '$name' AND passwort = '$pw'";
                            $result = $db->query($sql);
                           
               
                            if(!$row = $result->fetch_assoc()){
                                echo "Login failed!";
                            }else if($row = $resul->fetch_assoc()){
                                echo "$row['name']";
                            }

                            $result->close();
                            $db->close(); ?>');
                        }
                    }
                   
                    function reg(){
                    alert("reg");
                    }
                </script>
            </tr>
        </table>
    </font>
    <br>
</div>
Ich will also aus den textfeldern, nach dem knopfdruck abfragen ob der benutzer schon in der datenbank ist.
Ist das so wie es ist möglich und ich übersehe nur etwas? oder MUSS ich ajax benutzen? wenn wäre ich sehr dankbar über weitere hilfen, da ich bis jetzt nur auf granit gestoßen bin...

hier noch 2 klassen für die verbindung der datenbank

PHP:
<?php
  require_once('db_access.php');
  $db = new mysqli(HOST, USER, PW, DB);
  $db->set_charset("utf-8");
  if(mysqli_connect_errno()){
    die("Connection failed: ".mysqli_connect_errno());
  }
?>
PHP:
<?php
define ('HOST', 'localhost');
define ('USER', 'root');
define ('DB', 'gregmodelle');
define ('PW', '');
?>
Danke für jede hilfe und noch ein schönes wochenende :)

Lg. Greg
 
PHP wird serverseitig ausgeführt, wenn die Seite vom PHP-fähigen WebServer ausgeliefert wird.
Du kannst nicht clientseitig (im Browser) per JavaScript PHP-Code in die Webseite schreiben. Das funktioniert nicht.
Normalerweise fordert der Client (der Browser) eine URL an, hinter der der WebServer eine PHP-Datei hinterlegt hat. Diese PHP-Datei interpretiert der WebServer dann, das heißt, er führt PHP-Code darin aus, und sendet das Ergebnis an den Client/Browser. Darin wird dann kein PHP-Code mehr enthalten sein.
 
Mal gucken ob ich es richtig verstanden habe:
Wenn ich die php Anfrage in eine separate Datei packe und die dann vom javascript aus Aufrufe, dann müsste es klappen?
Oder vereinfache iches grade zu radikal?
 
Javascript:
                    function login(){
                        if(document.getElementById("pw").value==""){
                        alert("Bitte gültige Daten eingeben!");
                        }else{
                            var name = document.getElementById("name").value;
                            var pw = document.getElementById("pw").value;
           
                               var request = new XMLHttpRequest();
                                request.open('get', 'anfrage.php', true);
                                request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                                request.send('name='+name, "pw="+pw);
                                window.location = 'http://localhost/website/anfrage.php';
                           
                            }
                                                       
                        }
Das habe ich zum thema variablen an php übergeben gefunden...
Ansich sollte ich doch dann in der anfrage.php mit
PHP:
$name = $_GET['name'];
$pw = $GET_['pw'];
die Werte erfragen können oder? (Es funktioniert nämlich leider nicht... :( )
 
Du kannst Dir in den Entwicklungstools des Browsers (Netzwerk-Tab) genau ansehen, was der Browser rüberschickt und der Server antwortet. Schick die Daten nicht per GET sondern per POST. Der redirect erfolgt normalerweise serverseitig.
 
auch mit post bekomme ich aber die fehlermeldung das:

Notice: Undefined index: name in C:\xampp\htdocs\Website\anfrage.php on line 4

Notice
: Undefined index: pw in C:\xampp\htdocs\Website\anfrage.php on line 5

also sind die variablen immer nochnicht bekannt-> nicht übergeben worden. oder verstehe ich da was falsch?
 
Mit
HTML:
<!DOCTYPE html>
<html lang="de">
<head><meta charset="utf-8"><title>Willkommen</title></head>
<body>
<input id="user" type="text" />
<input id="pw" type="password" />
<button id="submit">Login</button>
<script>
var button = document.getElementById("submit");
button.addEventListener('click', function(e) {
    var usr = document.getElementById("user").value;
    var pw = document.getElementById("pw").value;
    
    var form = new FormData();
    form.append("user", usr);
    form.append("pw", pw);
    fetch('login.php', {method: 'POST', body: form})
        .then(function(r) { return r.json(); })
        .then(function(j) { window.alert('Logged in: ' + j); });
});
</script>
</html>
und
PHP:
<?php
    $user = $_POST["user"];
    $pw = $_POST["pw"];
    if ($user == "x" && $pw == "y") {
        echo "true";
    } else {
        echo "false";
    }
?>
funktioniert das einwandfrei. Ich muss mich allerdings korrigieren: es handelt sich ja um einen AJAX-Request -> kein serverseitiger Redirect.
 
Muss doch nochmal kurz stören...
also wenn ich es richtig verstehe gibst du doch in der php nur true oder false zurück und gibst die dann wiederum in der html als alert aus. Wofür ist der return r.json() aufruf?
Jetzt habe ich schon versucht nicht nur true oder false auszugeben, oder den alert if-abhängig zu machen... geht nicht.
Ich möchte aber kein true oder false zurück geben, sondern von der php aus eine neue seite öffnen.

Javascript:
<script>
    window.location = "http://localhost/website/Kontakt.html";
</script>
Wieso geht das nicht ?!
Lg.

greg
 
Wofür ist der return r.json() aufruf?
Das PHP antwortet mit einem JSON-Text "true". Das ist zunächst nur Text und kein boole'scher Wert. Mit r.json() wird die Antwort als JSON-Text interpretiert. Ist vielleicht etwas verwirrend.

Stattdessen kannst Du auch etwas wie {"destination":"http://localhost/website/Kontakt.html"} zurückgeben. Dann solltest Du im Script schreiben können:
Javascript:
    fetch('login.php', {method: 'POST', body: form})
        .then(function(r) { return r.json(); })
        .then(function(j) { window.location = j.destination });
 
Passende Stellenanzeigen aus deiner Region:

Oben