php in javascript einbinden

Greg50007

Aktives Mitglied
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
 

httpdigest

Top Contributor
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.
 

Greg50007

Aktives Mitglied
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?
 

Greg50007

Aktives Mitglied
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... :( )
 

mihe7

Top Contributor
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.
 

Greg50007

Aktives Mitglied
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?
 

mihe7

Top Contributor
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.
 

Greg50007

Aktives Mitglied
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
 

mihe7

Top Contributor
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 });
 
Ähnliche Java Themen
  Titel Forum Antworten Datum
S jqmath in javascript einbinden HTML / CSS 3
M JavaScript/HTML/CSS Hilfe HTML / CSS 1
J Mit Javascript eine Textdatei auslesen... HTML / CSS 28
M Javascript: HTML-Datei erstellen und auf Festplatte speichern HTML / CSS 8
M Javascript: Farbkontrast überprüfen auf einer Webseite HTML / CSS 14
M Javascript: CSS Parsen um herauszufinden ob relativer Schriftgrößen verwendet werden HTML / CSS 23
M HTML-Code einer fremden Webseite auslesen - geht das mit Javascript HTML / CSS 19
S Sicherheitsaspekt JavaScript HTML / CSS 3
M Webservice per Javascript ansprechen HTML / CSS 5
E Javascript/ Eventlistener ohne click? HTML / CSS 2
A Nur bestimmte Zeichen in HTML input Feld erlauben (JavaScript) HTML / CSS 11
J JavaScript Woerter erkenen HTML / CSS 4
C Eclipse und Javascript full autocomplete? HTML / CSS 1
A DragDrop mehrerer Shapes im SVG per Javascript? HTML / CSS 0
M Javascript Tastatureingabe HTML / CSS 2
B javascript ausgabe in Text HTML / CSS 2
E Javascript Status Abfrage HTML / CSS 7
J Javascript im DOM einer Webseite ändern HTML / CSS 1
H javascript - html Beispiel LQH, verwirklichung HTML / CSS 1
P JavaScript var an bean Setter übergeben HTML / CSS 2
Z Erste Website CSS3 HTML5 Javascript Jquery - Kritik HTML / CSS 3
P RSS FEED/ JSON/ Filter By Date/ Handlebars / Javascript HTML / CSS 0
B Externes Suchfeld - Javascript. REST? HTML / CSS 0
S JavaScript und Ajax Erfahrene Gesucht!!!! HTML / CSS 0
V Javascript Adobe Acrobat XI Pro Formular Dropdown-Liste -> vorbelegte Checkboxen HTML / CSS 1
0 Javascript Leaflet Marker Popup mit Adresse HTML / CSS 1
PhilipMJNE CSS in HTML via Link einbinden PROBLEM ! HTML / CSS 22
J Chrome-Fehlermeldung beim Einbinden von CSS HTML / CSS 3
Dimax Mehrere css Dateien in eine HTML Seite einbinden HTML / CSS 3
B Kontaktformular auf externer Webseite einbinden? HTML / CSS 10
K Html Programmieroberfläche einbinden (java) HTML / CSS 1
Lampi Feed von flirt-fever in Wordpress Blog einbinden HTML / CSS 1
Darus Slideshare-Präsentation in Artikel einbinden HTML / CSS 0
B Java Script - Google Maps einbinden und Daten aus meiner Datenbank HTML / CSS 3

Ähnliche Java Themen

Neue Themen


Oben