Javascript/Ajax und Daten aus Db lesen

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Javascript/Ajax und Daten aus Db lesen

    Hallo

    ich habe ein Js mit mehreren Funktionen die Funktonen bekommen zb auch die ID eines users. Jetzt will ich die Id nutzen und sachen aus der DB auslesen und zurrück geben und mit der Var werte zb werte[1] dann die ID erscheinen. Hoffentlich kann mir jemand helfen.

    Javascript:

    Quellcode

    1. getUserNodeString: function(userID, userName, userRole) {
    2. if(this.userNodeString && userID == this.userID) {
    3. return this.userNodeString;
    4. } else {
    5. /////////////////////////////////
    6. ////////////////////////////////
    7. try{
    8. req = new XMLHttpRequest();
    9. }catch (ms){
    10. try{
    11. req = new ActiveXObject("Msxml2.XMLHTTP");
    12. }catch (nonms){
    13. try{
    14. req = new ActiveXObject("Microsoft.XMLHTTP");
    15. }catch (failed){
    16. req = null;
    17. }
    18. }
    19. }
    21. req.onreadystatechange = getUserNodeStringCallback;
    22. req.open("GET",'user_data.php?userid='+userID, true);
    23. req.send(null);
    24. //////////////////////////////
    25. /////////////////////////
    26. if(userID == this.userID) {
    27. this.userNodeString = getUserNodeStringCallback();
    28. }
    29. return getUserNodeStringCallback();
    30. }
    31. },
    32. getUserNodeStringCallback: function() {
    33. var erg = req.responseText;
    34. var dd = erg.substr(0,erg.indexOf(" "));
    35. erg = erg.substr(erg.indexOf(" ") + 1).split("|");
    36. for each(var i in erg) {
    37. if(i != "") {
    38. var werte = i.split("#");
    39. var moz = 1;
    41. var encodedUserName = this.scriptLinkEncode(userName);
    42. var str = '<div id="'
    43. + this.getUserDocumentID(userID)
    44. + '"><a href="javascript:ajaxChat.toggleUserMenu(\''
    45. + this.getUserMenuDocumentID(userID)
    46. + '\', \''
    47. + encodedUserName
    48. + '\', '
    49. + userID
    50. + ');" class="'
    51. + this.getRoleClass(userRole)
    52. + '" title="'
    53. + this.lang['toggleUserMenu'].replace(/%s/, userName)
    54. + '">'
    55. + userName
    56. + werte[1] + // test
    57. + '</a>'
    58. + '<ul class="userMenu" id="'
    59. + this.getUserMenuDocumentID(userID)
    60. + '"'
    61. + ((userID == this.userID) ?
    62. '>'+this.getUserNodeStringItems(encodedUserName, userID, false) :
    63. ' style="display:none;">')
    64. + '</ul>'
    65. +'</div>';
    66. return str;
    67. },
    Alles anzeigen


    Die PHP datei:

    Quellcode

    1. <?php
    2. ob_start();
    3. session_start();
    4. @include("sql.php")
    7. $sql = 'SELECT * FROM `users` WHERE `id` = ' . mysql_escape_string($_GET["userid"]);
    8. $ergb = mysql_fetch_object(mysql_query($sql));
    10. $ausg .= htmlentities($ergb->username) . "#" . $ergb->id ;
    12. echo $ausg;
    14. mysql_close();
    15. ?>
    Alles anzeigen

  • Quellcode

    1. $sql = 'SELECT * FROM `users` WHERE `id` = ' . mysql_escape_string($_GET["userid"]);

    Das ist gut gemeint, aber leider absolut ineffektiv gegen SQL Injections.
    Beispiel:

    Quellcode

    1. $_GET['userid'] = "1 OR password = 1234"


    Wenn du Zahlen erwartest, musst du floatval oder intval anwenden. escape_string schützt deinen String nur vor dem Ausbruch aus den Anführungszeichen.

    Ansonsten verstehe ich bei deiner Frage nicht ganz das Problem? Woran hängts denn?
    Du kannst beliebige viele Variablen via AJAX übergeben... ajax.php?userid=1&werte[1]=foo&werte[2]=laa

  • ok das gut zu wissen mit der Sicherheit =) danke dafür erstma ^^

    Also ich habe die Funktion getUserNodeString: function(userID, userName, userRole) {}
    Dort bekomme ich ja die ID des Users, die möchte ich nun nutzen, übergeben und weitere Daten vom User die in der DB gespeichert sind abrufen und zurrück in die Funktion geben um sie dort zu nutzen. Aber irgendwas muss ich falsch machen und ich weis nicht was

  • du machst aber ziemlich viel Logik clientseitig.
    Dass das nicht sicher ist, weißt du auch, oder? Jeder kann die userdaten also abfragen.

    Im folgenden Konstruct rufst die die Callback Funktion 1x asynchron und 2x direkt auf.
    Das funktioniert auf jeden Fall nicht.

    Quellcode

    1. req.onreadystatechange = getUserNodeStringCallback;
    2. req.open("GET",'user_data.php?userid='+userID, true);
    3. req.send(null);
    4. if(userID == this.userID) {
    5. this.userNodeString = getUserNodeStringCallback();
    6. }
    7. return getUserNodeStringCallback();

  • Hm ok bin kein Profi daher wäre es gut wenn man mir bisschen Helfen kann, beispiele zeigt und natürlich auch sagt wie und warum.
    Soweit funktioniert das ansich ja auch (Das orginal ohne meine bearbeitung siehe unten im Code) die daten die ich bekomme werden mir ausgegeben (ist für eine Online anzeige im Chat) alles wunderbar.
    Nun bekomme ich ja mit der Funktion die ID des Users, die id will ich haben damit ich sachen aus der Db lese diese zurrück in die Funktion gebe und sie mit einbaun kann um sie am ende auszugeben.

    also das orginal ist:

    Quellcode

    1. getUserNodeString: function(userID, userName, userRole) {
    2. if(this.userNodeString && userID == this.userID) {
    3. return this.userNodeString;
    4. } else {
    6. var encodedUserName = this.scriptLinkEncode(userName);
    7. var str = '<div id="'
    8. + this.getUserDocumentID(userID)
    9. + '"><a href="javascript:ajaxChat.toggleUserMenu(\''
    10. + this.getUserMenuDocumentID(userID)
    11. + '\', \''
    12. + encodedUserName
    13. + '\', '
    14. + userID
    15. + ');" class="'
    16. + this.getRoleClass(userRole)
    17. + '" title="'
    18. + this.lang['toggleUserMenu'].replace(/%s/, userName)
    19. + '">'
    20. + userName
    21. /*
    22. + ' <img src="'
    23. + this.dirs['sonstige']
    24. + this.sonstigeFiles[1]
    25. + '" alt="'
    26. + this.sonstigeFiles[1]
    27. + '" title="'
    28. + this.sonstigeFiles[1]
    29. + '"/>'
    30. */
    31. + '</a>'
    32. + '<ul class="userMenu" id="'
    33. + this.getUserMenuDocumentID(userID)
    34. + '"'
    35. + ((userID == this.userID) ?
    36. '>'+this.getUserNodeStringItems(encodedUserName, userID, false) :
    37. ' style="display:none;">')
    38. + '</ul>'
    39. +'</div>';
    40. if(userID == this.userID) {
    41. this.userNodeString = str;
    42. }
    43. return str;
    44. }
    45. },
    Alles anzeigen


    weis net wie ich meine daten aus der Db nun mit dadrine verarbeiten kann.

  • was willst du denn nun wissen? Wenn du die Logik weiter clientseitig machen willst, dann musst du nur den AJAX Aufruf nochmal sauber machen.
    In deiner PHP Datei gibst du das Array dann via json zurück.

    Quellcode

    1. echo json_encode($row);


    und in deiner PHP Callback Datei kannst du dann darauf zugreifen:

    Quellcode

    1. var data = eval('(' + req-responseText+ ')');
    2. alert(data.username);
    3. alert(data.id);


    Bei einem kompletten Rewrite solltest du versuchen auf MVC zu setzen und nur die Session des eingeloggten Users zwischen Client und Server auszutauschen. Aber das Thema ist zu groß für einen Beitrag ;)

  • Hm also ich brauch wirklich sehr viel Hilfe, es klappt einfach nicht...

    Ich habe hier den orginal Code (nicht von mir)

    Quellcode

    1. getUserNodeString: function(userID, userName, userRole) {
    2. if(this.userNodeString && userID == this.userID) {
    3. return this.userNodeString;
    4. } else {
    6. var encodedUserName = this.scriptLinkEncode(userName);
    8. var str = '<div id="'
    9. + this.getUserDocumentID(userID)
    10. + '"><a href="javascript:ajaxChat.toggleUserMenu(\''
    11. + this.getUserMenuDocumentID(userID)
    12. + '\', \''
    13. + encodedUserName
    14. + '\', '
    15. + userID
    16. + ');" class="'
    17. + this.getRoleClass(userRole)
    18. + '" title="'
    19. + this.lang['toggleUserMenu'].replace(/%s/, userName)
    20. + '">'
    21. + userName
    22. + '</a>'
    23. + '<ul class="userMenu" id="'
    24. + this.getUserMenuDocumentID(userID)
    25. + '"'
    26. + ((userID == this.userID) ?
    27. '>'+this.getUserNodeStringItems(encodedUserName, userID, false) :
    28. ' style="display:none;">')
    29. + '</ul>'
    30. +'</div>';
    31. if(userID == this.userID) {
    32. this.userNodeString = str;
    33. }
    34. return str;
    35. }
    36. },
    Alles anzeigen


    wie mache ich nun die Abfrage & Baue alles richtig ein... ich komme einfach net mehr weiter verstehe nur noch bahnhof =(

    Habe es so versucht:

    Quellcode

    1. getUserNodeString: function(userID, userName, userRole) {
    2. if(this.userNodeString && userID == this.userID) {
    3. return this.userNodeString;
    4. } else {
    5. ///////////////////////////////////////////////////
    6. //////////////////////////////////////////////////
    7. /////////////////////////////////////////////////
    8. var req = null;
    9. try{
    10. req = new XMLHttpRequest();
    11. }catch (ms){
    12. try{
    13. req = new ActiveXObject("Msxml2.XMLHTTP");
    14. }catch (nonms){
    15. try{
    16. req = new ActiveXObject("Microsoft.XMLHTTP");
    17. }catch (failed){
    18. req = null;
    19. }
    20. }
    21. }
    22. req.open("POST",'user_data.php?userid='+userID, true);
    23. req.onreadystatechange = function(){
    24. ///////////////////////////////////////////////////
    25. ///////////////////////////////////////////////////
    26. ///////////////////////////////////////////////////
    27. var data = eval('(' + req.responseText+ ')');
    29. var encodedUserName = this.scriptLinkEncode(userName);
    31. var str = '<div id="'
    32. + this.getUserDocumentID(userID)
    33. + '"><a href="javascript:ajaxChat.toggleUserMenu(\''
    34. + this.getUserMenuDocumentID(userID)
    35. + '\', \''
    36. + encodedUserName
    37. + '\', '
    38. + userID
    39. + ');" class="'
    40. + this.getRoleClass(userRole)
    41. + '" title="'
    42. + this.lang['toggleUserMenu'].replace(/%s/, userName)
    43. + '">'
    44. + userName
    45. + '</a>'
    46. + '<ul class="userMenu" id="'
    47. + this.getUserMenuDocumentID(userID)
    48. + '"'
    49. + ((userID == this.userID) ?
    50. '>'+this.getUserNodeStringItems(encodedUserName, userID, false) :
    51. ' style="display:none;">')
    52. + '</ul>'
    53. +'</div>';
    54. if(userID == this.userID) {
    55. this.userNodeString = str;
    56. }
    57. return str;
    58. }
    59. }
    60. },
    Alles anzeigen


    Aber auch dies geht nicht er zeigt mir in der onlineliste dann nur undefine an...

  • Ich empfehle die an dieser Stelle noch ein bisschen die Wiki Seiten für AJAX und auch für Objektorientierung zu studieren.

    Also
    * AJAX nutzt 4 HTTP Ready States, dein Callback darf nur in State 4 ausgeführt werden
    * Du hast einfach den Code deiner Klasse in den Callback gesteckt, der Callback hat bei "this" aber nicht mehr die Klassenreferenz, sondern den AJAX Callback.
    * Stattdessen sollte deine Anzeigelogik weiterhin in der Klasse bleiben und nur von der Callback Methode aufgerufen werden
    * Um von der Callback Methode auf die Klasse zu kommen, benutzt du entweder den Namen der Instanz (wenn es nur eine gibt)
    * Schöner ist es jedoch eine Closure zu nutzen, die this als Objektreferenz übergibt und damit als benannten Parameter verfügbar macht

    Hier nun also nochmal der komplette Code:

    Quellcode

    1. function Easy() {
    2. this.setUserData = function(data) {
    3. document.getElementById('user-username').innerHTML = data.username;
    4. document.getElementById('user-age').innerHTML = data.age;
    5. };
    7. this.getUserNodeString = function(userID, userName, userRole) {
    8. ajaxPost('user_data.php?userid='+userID, null, function(ref) {
    9. return function() {
    10. var data = eval('(' + this.responseText+ ')');
    11. ref.setUserData(data);
    12. }
    13. }(this));
    14. };
    15. }
    Alles anzeigen


    Bitte bearbeite deine Postings bitte nochmal und füge überall die syntax Tags für JavaScript ein.
    Die ajaxPost Methode findest du wie oben geschildert unter easy-coding.de/wiki/html-ajax-…x-und-ohne.html#headline7

  • Also ich habs nun das es funktioniert, nun noch eine frage, ich lese das geschlecht aus und möchte ein images wieder geben (Zeile 31). wenn ich in die variable "geschlecht_anzeige" nur Frau reinschreibe zeigt er es mir an sobald ich aber ein Bild einbinden will wird das nicht angezeigt warum?

    Funktionierender code

    Quellcode

    1. getUserNodeString: function(userID, userName, userRole) {
    2. if(this.userNodeString && userID == this.userID) {
    3. return this.userNodeString;
    4. } else {
    6. var encodedUserName = this.scriptLinkEncode(userName);
    8. // ajax-aufruf starten ...
    9. var req = null;
    10. try{
    11. req = new XMLHttpRequest();
    12. }catch (ms){
    13. try{
    14. req = new ActiveXObject("Msxml2.XMLHTTP");
    15. } catch (nonms){
    16. try{
    17. req = new ActiveXObject("Microsoft.XMLHTTP");
    18. } catch (failed){
    19. req = null;
    20. }
    21. }
    22. }
    23. req.open("POST", 'load_separate_data.php', true);
    24. req.onreadystatechange = function(){
    25. switch(req.readyState) {
    26. case 4:
    27. if(req.status==200) {
    28. var response = req.responseText;
    29. var werte = response.split("|");
    30. var geschlecht_anzeige = "";
    32. if(werte[1]=='man'){
    33. geschlecht_anzeige += "<img src=\"man.png\" border=\"0\" width=\"17\" height=\"17\">"; // DAS FUNKTIONIERT NICHT
    34. }else{
    35. geschlecht_anzeige += "FRAU"; // DAS FUNKTIONIERT
    36. }
    37. document.getElementById("geschlecht_" + werte[0]).innerHTML = geschlecht_anzeige;
    38. }
    39. break;
    40. default:
    41. return false;
    42. break;
    43. }
    44. }
    45. req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    46. req.overrideMimeType("text/plain; charset=ISO-8859-1"); //nötig zur korrekten umlaut- und sonderzeichen-darstellung
    47. req.send("docId="+this.getUserDocumentID(userID)+"&menId="+this.getUserMenuDocumentID(userID)+"&uid="+userID);
    48. var str = '<div id="'
    49. + this.getUserDocumentID(userID)
    50. + '"><a href="javascript:ajaxChat.toggleUserMenu(\''
    51. + this.getUserMenuDocumentID(userID)
    52. + '\', \''
    53. + encodedUserName
    54. + '\', '
    55. + userID
    56. + ');" class="'
    57. + this.getRoleClass(userRole)
    58. + '" title="'
    59. + this.lang['toggleUserMenu'].replace(/%s/, userName)
    60. + '">'
    61. + userName // ok kurz testen?
    63. + '<span id="geschlecht_' + userID + '">-</span>' // würde dann nach dem aufruf von dem script oben angesteuert werden.
    64. + '</a>'
    65. + '<ul class="userMenu" id="'
    66. + this.getUserMenuDocumentID(userID)
    67. + '"'
    68. + ((userID == this.userID) ?
    69. '>'+this.getUserNodeStringItems(encodedUserName, userID, false) :
    70. ' style="display:none;">')
    71. + '</ul>'
    72. +'</div>'; // wo würde das geschlecht stehen?
    74. if(userID == this.userID) {
    75. this.userNodeString = str;
    76. }
    77. return str;
    78. }
    79. },
    Alles anzeigen