Ständige Datenbankabfrage mit AJAX

bcmIT · 15. Mai 2013

Hei Zusammen

Ich hab folgendes Problem.
Ich hab eine MySQL Datenbank mit einem Table Person
Welche die Attribute ID_Person (PK) und Vorname hat.

Ausserdem habe ich ein HTML Formular in welchem ich die ID_Person eingeben kann. Welche ich dann mit Submit-Button an ein PHP File gesendet wird.

Dieses PHP-File sucht dann in der DB ob es eine Person mit der eingegebenen ID_Person gibt. und falls ja den dazugehörigen Vorname ausgibt.

Nun möchte ich aber das ich nicht zuerst auf den Submit-Button klicken muss um diese Überprüfung zu starten, sondern das dies noch wären der Eingabe passiert.

Hab mir das so gedacht.
Wenn z.B.
ID_Person=1-->Vorname=Hans
ID_Person=11-->Vorname=Peter
ID_Person=111-->Vorname=Moritz

Und ich 1 eingebe bekomme ich sofort als Ausgabe Hans. Wenn ich dann noch ne 1 anhänge(also dann 11 eingegeben habe) bekomme ich nicht mehr Hans sondern Peter zurück.

Nun wollte ich euch fragen, geht das? Und wenn ja wie? Hab gelesen das man für solche Sachen AJAX verwendet, stimmt dies?

Vielen Dank

PS: Die DB ist in der Realität noch ein schon ein bisschen komplexer aber hab versucht mich auf das wesentliche zu beschränken

Hoffe irgendjemand versteht mich ^^

omaliesschen · 15. Mai 2013

Code:

<input id="" type="text" class="" onkeyup="showR(this.value,'UpdateDivID')" name="">

Code:

function showR(str,DivForResults){ 
if (str.length==0){
document.getElementById(DivForResults).innerHTML="";
return;
}
if (window.XMLHttpRequest){xmlhttp=new XMLHttpRequest();}
else{xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById(DivForResults).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","search.php?user_id="+str,true);
xmlhttp.send();
}

riDDi · 15. Mai 2013

Ja das geht mit AJAX. Ich würde mir nur kein Low-Level Gedöhns mehr antun und einfach jQuery benutzen. Kann man auch von Googleapis einbinden, das spart evtl. ein paar Leuten das Runterladen.
Auf der Serverseite brauchst du noch ein PHP-Skript, dass den DB-Zugriff für dich macht und das Ergebnis in einem lesbaren Format zurückgibt, z.B. JSON.

bcmIT · 15. Mai 2013

@riDDi vielen Dank für deine Antwort
@omaliesschen
Also sehe ich das richtig, dein Script schaut ob etwas im Eingabefeld steht, und falls ja sendet es der Inhalt via GET an die Datei search.php?

Ich hab das versucht. Allerdings wird in der URI nichts von den GET Parametern gezeigt?!
Warscheindlich ein dummer Fehler von meiner Seite...Aber hab praktisch keine Erfahrung mit Javascript...
Ist das Richtig so?

Code:

<html>
<head>
	<title>Search</title>
	 <script src="http://code.jquery.com/jquery-latest.js"></script>


<script type="text/javascript">
		function showR(str,DivForResults){ 
		if (str.length==0){
		document.getElementById(DivForResults).innerHTML="";
		return;
		}
		if (window.XMLHttpRequest){xmlhttp=new XMLHttpRequest();}
		else{xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
		xmlhttp.onreadystatechange=function(){
		if (xmlhttp.readyState==4 && xmlhttp.status==200){
		document.getElementById(DivForResults).innerHTML=xmlhttp.responseText;
		}
		}
		xmlhttp.open("GET","search.php?user_id="+str,true);
		xmlhttp.send();
	}
</script>
</head>

<body>

Eingabe<input id="" type="text" class="" onkeyup="showR(this.value,'UpdateDivID')" name="">



</body>

</html>

omaliesschen · 15. Mai 2013

Habs gerade getestet und es funktioniert. Lad dir mal live http headers runter (Browser plugin) und geb etwas in das Inputfeld ein. Es wird ein get request gesendet mit dem angegeben Get Parameter und dem Inhalt des Inputfeldes als Wert.

Das Skript sendet mit jeder Veränderung im Input feld ein request und setzt die Ergebnisse zurück wenn das Feld geleert wird.

Die jquery Datei ist hier unnötig.

Es muss natürlich auch ein Element für das Ergebnis vorhanden sein:

Code:

    <html>
    <head>
    <title>Search</title>
    <script type="text/javascript">
    function showR(str,DivForResults){
    if (str.length==0){
    document.getElementById(DivForResults).innerHTML="";
    return;
    }
    if (window.XMLHttpRequest){xmlhttp=new XMLHttpRequest();}
    else{xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
    xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
    document.getElementById(DivForResults).innerHTML=xmlhttp.responseText;
    }
    }
    xmlhttp.open("GET","search.php?user_id="+str,true);
    xmlhttp.send();
    }
    </script>
    </head>

     
    <body>
    Eingabe<input id="" type="text" class="" onkeyup="showR(this.value,'dynload')" name="">
    <div id="dynload"></div>
    </body>
     
    </html>

in deiner search.php Datei muss dann z.b. folgendes stehen:

Code:

<?php
[...]
echo htmlentities($_GET['user_id'], ENT_QUOTES, 'UTF-8')."belongs to the monks";
?>

PS: Das läd "hintenrum" und wird natürlich nicht in der URI Leiste angezeigt.
http://de.selfhtml.org/javascript/sprache/eventhandler.htm

bcmIT · 15. Mai 2013

Wahrscheinlich bin ich einfach zu dumm dazu

Hab jetzt alles so gemacht wie du gesagt hast...

Jetzt bekomme ich im <div id="dynload"></div> die Ausgabe:
Eingabe<input id="" type="text" class="" onkeyup="showR(this.value,'dynload')" name="">
sprich sobald ich etwas eingebe kommt ein 2. Eingabe Feld, in welchem ich aber nichts eingeben kann, und in dem auch nichts drin steht.

omaliesschen · 15. Mai 2013

Erstell bitte eine Datei Namens index.php mit folgendem Inhalt in deinem obersten Ordner:

Code:

<html>
<head>
<title>Search</title>
    <script type="text/javascript">
    function showR(str,DivForResults){
    if (str.length==0){
    document.getElementById(DivForResults).innerHTML="";
    return;
    }
    if (window.XMLHttpRequest){xmlhttp=new XMLHttpRequest();}
    else{xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
    xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
    document.getElementById(DivForResults).innerHTML=xmlhttp.responseText;
    }
    }
    xmlhttp.open("GET","/search.php?user_id="+str,true);
    xmlhttp.send();
    }
    </script>

<style type="text/css">
.d_load{width:100%;height:100px;background:#000;color:green;margin-bottom:300px;}
</style>
</head>
     
<body>
Eingabe<input id="" type="text" class="" onkeyup="showR(this.value,'dynload')" name="">
<div id="dynload" class="d_load"></div>
</body>
</html>

Im selben Ordner erstellst Du eine Datei Namens search.php mit diesem Inhalt:

Code:

<?php
echo htmlentities($_GET['user_id'], ENT_QUOTES, 'UTF-8')."&nbsp;belongs to the monks";
?>

Das Ding ist getestet und funktioniert. Die Datei search.php muss dann natürlich noch deine Datenbankabfrage beinhalten und ausgeben.

bcmIT · 15. Mai 2013

Super Danke Vielmals für deine Geduld jetzt funktioniert es tadellos.
Danke! =D

Suche

Ständige Datenbankabfrage mit AJAX

bcmIT

Cadet 4th Year

omaliesschen

Gast

riDDi

Admiral

bcmIT

Cadet 4th Year

omaliesschen

Gast

bcmIT

Cadet 4th Year

omaliesschen

Gast

bcmIT

Cadet 4th Year

Ähnliche Themen