You are not logged in.

Javascript/Ajax und Daten aus Db lesen

sintains

Trainee

  • "sintains" started this thread

Posts: 33

  • Send private message

1

Wednesday, September 8th 2010, 10:40pm

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:

JavaScript Code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

getUserNodeString: function(userID, userName, userRole) {    
    if(this.userNodeString && userID == this.userID) {
            return this.userNodeString;
        } else {
        /////////////////////////////////
        ////////////////////////////////
          try{
                req = new XMLHttpRequest();
        }catch (ms){
                try{
                        req = new ActiveXObject("Msxml2.XMLHTTP");
                }catch (nonms){
                        try{
                                req = new ActiveXObject("Microsoft.XMLHTTP");
                        }catch (failed){
                                req = null;
                        }
                }
        }
 
        req.onreadystatechange = getUserNodeStringCallback;
        req.open("GET",'user_data.php?userid='+userID, true); 
        req.send(null); 
        //////////////////////////////
        /////////////////////////
            if(userID == this.userID) {
                this.userNodeString = getUserNodeStringCallback();
            }
            return getUserNodeStringCallback();    
        }
    },
getUserNodeStringCallback: function() {
var erg = req.responseText;
                                var dd = erg.substr(0,erg.indexOf(" "));
                                erg = erg.substr(erg.indexOf(" ") + 1).split("|");
                                for each(var i in erg) {
                                        if(i != "") {
                                                var werte = i.split("#");
                                                var moz = 1;
 
            var encodedUserName = this.scriptLinkEncode(userName);
            var str    = '<div id="'
                    + this.getUserDocumentID(userID)
                    + '"><a href="javascript:ajaxChat.toggleUserMenu(\''
                    + this.getUserMenuDocumentID(userID)
                    + '\', \''
                    + encodedUserName
                    + '\', '
                    + userID
                    + ');" class="'
                    + this.getRoleClass(userRole)
                    + '" title="'
                    + this.lang['toggleUserMenu'].replace(/%s/, userName)
                    + '">'
                    + userName
                    + werte[1] + // test        
                    + '</a>'
                    + '<ul class="userMenu" id="'
                    + this.getUserMenuDocumentID(userID)
                    + '"'
                    + ((userID == this.userID) ?
                        '>'+this.getUserNodeStringItems(encodedUserName, userID, false) :
                        ' style="display:none;">')
                    + '</ul>'
                    +'</div>'; 
       return str;
},


Die PHP datei:

PHP Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<?php
ob_start();
session_start();
@include("sql.php")
 
 
        $sql = 'SELECT * FROM `users` WHERE `id` = ' . mysql_escape_string($_GET["userid"]);
        $ergb = mysql_fetch_object(mysql_query($sql));
 
        $ausg .= htmlentities($ergb->username) . "#" . $ergb->id ;
 
    echo $ausg;
 
mysql_close();
?>

Torben Brodt

Administrator

Posts: 8,395

  • Send private message

2

Thursday, September 9th 2010, 8:40am

Quoted

PHP 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:

PHP 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
Latest blogs Latest blogs: PhpStorm Erfahrungen (+Discount Code), ADC C++ Mai 2012 - native C++ im Blickpunkt (+Rabattcode), Frohe Weihnachten 2011

sintains

Trainee

  • "sintains" started this thread

Posts: 33

  • Send private message

3

Thursday, September 9th 2010, 10:59am

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

Torben Brodt

Administrator

Posts: 8,395

  • Send private message

4

Thursday, September 9th 2010, 6:55pm

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.

JavaScript Code

 
1
2
3
4
5
6
7

req.onreadystatechange = getUserNodeStringCallback;
req.open("GET",'user_data.php?userid='+userID, true); 
req.send(null); 
if(userID == this.userID) {
	this.userNodeString = getUserNodeStringCallback();
}
return getUserNodeStringCallback();
Latest blogs Latest blogs: PhpStorm Erfahrungen (+Discount Code), ADC C++ Mai 2012 - native C++ im Blickpunkt (+Rabattcode), Frohe Weihnachten 2011

sintains

Trainee

  • "sintains" started this thread

Posts: 33

  • Send private message

5

Thursday, September 9th 2010, 9:56pm

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:

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

    getUserNodeString: function(userID, userName, userRole) {
        if(this.userNodeString && userID == this.userID) {
            return this.userNodeString;
        } else {    
        
            var encodedUserName = this.scriptLinkEncode(userName); 
            var str    = '<div id="'
                    + this.getUserDocumentID(userID)
                    + '"><a href="javascript:ajaxChat.toggleUserMenu(\''
                    + this.getUserMenuDocumentID(userID)
                    + '\', \''
                    + encodedUserName
                    + '\', '
                    + userID
                    + ');" class="'
                    + this.getRoleClass(userRole)
                    + '" title="'
                    + this.lang['toggleUserMenu'].replace(/%s/, userName)
                    + '">'
                    + userName
                    /*
                        + ' <img src="'
                        + this.dirs['sonstige']
                        + this.sonstigeFiles[1]
                        + '" alt="'
                        + this.sonstigeFiles[1]
                        + '" title="'
                        + this.sonstigeFiles[1]
                        + '"/>'
                    */
                    + '</a>'
                    + '<ul class="userMenu" id="'
                    + this.getUserMenuDocumentID(userID)
                    + '"'
                    + ((userID == this.userID) ?
                        '>'+this.getUserNodeStringItems(encodedUserName, userID, false) :
                        ' style="display:none;">')
                    + '</ul>'
                    +'</div>';
            if(userID == this.userID) {
                this.userNodeString = str;
            }
            return str;    
        }
    },


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

Torben Brodt

Administrator

Posts: 8,395

  • Send private message

6

Friday, September 10th 2010, 9:12pm

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.

PHP Quellcode

 
1

echo json_encode($row);


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

JavaScript Code

 
1
2
3

var data = eval('(' + req-responseText+ ')');
alert(data.username);
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 ;)
Latest blogs Latest blogs: PhpStorm Erfahrungen (+Discount Code), ADC C++ Mai 2012 - native C++ im Blickpunkt (+Rabattcode), Frohe Weihnachten 2011

sintains

Trainee

  • "sintains" started this thread

Posts: 33

  • Send private message

7

Saturday, September 11th 2010, 12:11am

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

Ich habe hier den orginal Code (nicht von mir)

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

	getUserNodeString: function(userID, userName, userRole) {
		if(this.userNodeString && userID == this.userID) {
			return this.userNodeString;
		} else {	
		
			var encodedUserName = this.scriptLinkEncode(userName);
			
			var str	= '<div id="'
					+ this.getUserDocumentID(userID)
					+ '"><a href="javascript:ajaxChat.toggleUserMenu(\''
					+ this.getUserMenuDocumentID(userID)
					+ '\', \''
					+ encodedUserName
					+ '\', '
					+ userID
					+ ');" class="'
					+ this.getRoleClass(userRole)
					+ '" title="'
					+ this.lang['toggleUserMenu'].replace(/%s/, userName)
					+ '">'
					+ userName
					+ '</a>'
					+ '<ul class="userMenu" id="'
					+ this.getUserMenuDocumentID(userID)
					+ '"'
					+ ((userID == this.userID) ?
						'>'+this.getUserNodeStringItems(encodedUserName, userID, false) :
						' style="display:none;">')
					+ '</ul>'
					+'</div>';
			if(userID == this.userID) {
				this.userNodeString = str;
			}
			return str;	
		}
	},


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

Habe es so versucht:

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

    getUserNodeString: function(userID, userName, userRole) {
        if(this.userNodeString && userID == this.userID) {
            return this.userNodeString;
        } else {    
///////////////////////////////////////////////////
//////////////////////////////////////////////////
/////////////////////////////////////////////////
        var req = null;
        try{
                req = new XMLHttpRequest();
        }catch (ms){
                try{
                        req = new ActiveXObject("Msxml2.XMLHTTP");
                }catch (nonms){
                        try{
                                req = new ActiveXObject("Microsoft.XMLHTTP");
                        }catch (failed){
                                req = null;
                        }
                }
        }
        req.open("POST",'user_data.php?userid='+userID, true);
        req.onreadystatechange = function(){
///////////////////////////////////////////////////
///////////////////////////////////////////////////
///////////////////////////////////////////////////
        var data = eval('(' + req.responseText+ ')');

            var encodedUserName = this.scriptLinkEncode(userName);
            
            var str    = '<div id="'
                    + this.getUserDocumentID(userID)
                    + '"><a href="javascript:ajaxChat.toggleUserMenu(\''
                    + this.getUserMenuDocumentID(userID)
                    + '\', \''
                    + encodedUserName
                    + '\', '
                    + userID
                    + ');" class="'
                    + this.getRoleClass(userRole)
                    + '" title="'
                    + this.lang['toggleUserMenu'].replace(/%s/, userName)
                    + '">'
                    + userName
                    + '</a>'
                    + '<ul class="userMenu" id="'
                    + this.getUserMenuDocumentID(userID)
                    + '"'
                    + ((userID == this.userID) ?
                        '>'+this.getUserNodeStringItems(encodedUserName, userID, false) :
                        ' style="display:none;">')
                    + '</ul>'
                    +'</div>';
            if(userID == this.userID) {
                this.userNodeString = str;
            }
            return str;    
            }
        }
    },


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

Torben Brodt

Administrator

Posts: 8,395

  • Send private message

8

Saturday, September 11th 2010, 11:25am

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:

JavaScript Code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function Easy() {
	this.setUserData = function(data) {
		document.getElementById('user-username').innerHTML = data.username;
		document.getElementById('user-age').innerHTML = data.age;
	};
 
	this.getUserNodeString = function(userID, userName, userRole) {
		ajaxPost('user_data.php?userid='+userID, null, function(ref) {
			return function() {
				var data = eval('(' + this.responseText+ ')');
				ref.setUserData(data);
			}
		}(this));
	};
}


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 http://www.easy-coding.de/wiki/html-ajax….html#headline7
Latest blogs Latest blogs: PhpStorm Erfahrungen (+Discount Code), ADC C++ Mai 2012 - native C++ im Blickpunkt (+Rabattcode), Frohe Weihnachten 2011

sintains

Trainee

  • "sintains" started this thread

Posts: 33

  • Send private message

9

Saturday, September 11th 2010, 3:19pm

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

JavaScript Code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

getUserNodeString: function(userID, userName, userRole) {	
		if(this.userNodeString && userID == this.userID) {
			return this.userNodeString;
		} else {	
 
			var encodedUserName = this.scriptLinkEncode(userName);
 
			// ajax-aufruf starten ...
			var req = null;
			try{
				req = new XMLHttpRequest();
			}catch (ms){
				try{
					req = new ActiveXObject("Msxml2.XMLHTTP");
				} catch (nonms){
					try{
						req = new ActiveXObject("Microsoft.XMLHTTP");
					} catch (failed){
						req = null;
					}
				}  
			}
			req.open("POST", 'load_separate_data.php', true);
			req.onreadystatechange = function(){            
				switch(req.readyState) {
					case 4:
						if(req.status==200) {
							var response = req.responseText;
							var werte = response.split("|");
							var geschlecht_anzeige = "";
 
							if(werte[1]=='man'){
							geschlecht_anzeige += "<img src=\"man.png\" border=\"0\" width=\"17\" height=\"17\">"; // DAS FUNKTIONIERT NICHT
							}else{
							geschlecht_anzeige += "FRAU"; // DAS FUNKTIONIERT 
							}							
							document.getElementById("geschlecht_" + werte[0]).innerHTML = geschlecht_anzeige;
						}
						break;
					default:
						return false;
						break;     
				}
			}
			req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			req.overrideMimeType("text/plain; charset=ISO-8859-1"); //nötig zur korrekten umlaut- und sonderzeichen-darstellung
			req.send("docId="+this.getUserDocumentID(userID)+"&menId="+this.getUserMenuDocumentID(userID)+"&uid="+userID);
			var str	= '<div id="'
					+ this.getUserDocumentID(userID)
					+ '"><a href="javascript:ajaxChat.toggleUserMenu(\''
					+ this.getUserMenuDocumentID(userID)
					+ '\', \''
					+ encodedUserName
					+ '\', '
					+ userID
					+ ');" class="'
					+ this.getRoleClass(userRole)
					+ '" title="'
					+ this.lang['toggleUserMenu'].replace(/%s/, userName)
					+ '">'
					+ userName // ok kurz testen?
 
					+ '<span id="geschlecht_' + userID + '">-</span>' // würde dann nach dem aufruf von dem script oben angesteuert werden.
					+ '</a>'
					+ '<ul class="userMenu" id="'
					+ this.getUserMenuDocumentID(userID)
					+ '"'
					+ ((userID == this.userID) ?
						'>'+this.getUserNodeStringItems(encodedUserName, userID, false) :
						' style="display:none;">')
					+ '</ul>'
					+'</div>'; // wo würde das geschlecht stehen?
 
			if(userID == this.userID) {
				this.userNodeString = str;
			}
			return str;	
		}
	},

sintains

Trainee

  • "sintains" started this thread

Posts: 33

  • Send private message

10

Sunday, September 12th 2010, 12:08am

ok habs hinbekommen mit vielen probieren :D
bilder wrden mir nun angezeigt.

Similar threads

Tagging

Social bookmarks