You are not logged in.

  • Login

1

Tuesday, January 24th 2012, 6:49pm

AJAX SQL PHP kleine Probleme

Nabend,

und zwar habe ich ein neues Projekt gestartet und zwar unsere Homepage umbauen.

Als erstes muss die Rangliste anders werden, und dachte ich direkt an Ajax!

Ich habe es bisher warscheinlich auf "Newbie" Basis geschafft, ein Onchange zu bauen.

Ich brauche jedoch folgendes:

Server 1:Wenn angeklickt lade radio boxen:

Spieler Rangliste
Gilden Rangliste
Reichsrangliste Spieler
Übersicht-Reichsverteilung

Server 2:
Hier genau das selbe


Wenn eines der Boxen angeklickt

{Spieler Rangliste,Gilden Rangliste,Reichsrangliste Spieler,Übersicht-Reichsverteilung }

Dann soll er einen SQL query ausführen und mir das Ergebnis unten in einer Tabelle darstellen.


Code bisher:

Meine noobige Ajax.js :

Java Quellcode

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
function loadMenuS1() {
var div = document.getElementById( "s1_spieler_rank");
div.style.display = "block";
var div = document.getElementById( "s1_gilden_rank");
div.style.display = "block";
var div = document.getElementById( "s1_empire_user");
div.style.display = "block";
var div = document.getElementById( "s1_übersicht_empire");
div.style.display = "block";
 
 
var div = document.getElementById( "s2_spieler_rank");
div.style.display = "none";
var div = document.getElementById( "s2_gilden_rank");
div.style.display = "none";
var div = document.getElementById( "s2_empire_user");
div.style.display = "none";
var div = document.getElementById( "s2_übersicht_empire");
div.style.display = "none";
} 
 
 
function loadMenuS2() {
var div = document.getElementById( "s2_spieler_rank");
div.style.display = "block";
var div = document.getElementById( "s2_gilden_rank");
div.style.display = "block";
var div = document.getElementById( "s2_empire_user");
div.style.display = "block";
var div = document.getElementById( "s2_übersicht_empire");
div.style.display = "block";
 
 
var div = document.getElementById( "s1_spieler_rank");
div.style.display = "none";
var div = document.getElementById( "s1_gilden_rank");
div.style.display = "none";
var div = document.getElementById( "s1_empire_user");
div.style.display = "none";
var div = document.getElementById( "s1_übersicht_empire");
div.style.display = "none";
}



PHP/HTML:

PHP Quellcode

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
<?php
 
class rankfunc {
 
	public function ranking() {
 
		echo '<div id="auswahl">
				<h3>Server auswahl:</h3>
			<form>
				<div id="faeron">
					<label>Fearon:</label>
					<input type="radio" name="server" value="1" onchange="loadMenuS1();"  />
				</div>
 
				<div id="s1_spieler_rank">
					<label>Spieler Rangliste</label>
					<input type="radio" name="s1" value=""  /> <!--Muss beim anklicken Tabelle erstellen & SQL Query laden. -->
				</div>
 
				<div id="s1_gilden_rank">
					<label>Gilden Rangliste</label>
					<input type="radio" name="s1" value"" /> <!-- Beim anklicken Zabelle für Gildenrangliste. -->
				</div>
 
				<div id="s1_empire_user">
					<label>Reichsrangliste Spieler</label>
					<input type="radio" name="s1" value="" /> <!-- Listet Reichsrangliste auf -->
				</div>
 
				<div id="s1_übersicht_empire">
					<label>Übersicht-Reichsverteilung</label>
					<input type="radio" name="s1" value="" /> <!-- Listet die Reichsverteilung auf. -->
				</div>
 
 
			<br />
				<div id="ascaria">
					<label>Ascaria:</label>
					<input type="radio" name="server" value="2" onchange="loadMenuS2();" /> 
				</div>
 
				<div id="s2_spieler_rank">
					<label>Spieler Rangliste</label>
					<input type="radio" name="server2" value="" /> <!-- Muss beim anklicken Tabelle erstellen & SQL Query laden. -->
				</div>
 
				<div id="s2_gilden_rank">
					<label>Gilden Rangliste</label>
					<input type="radio" name="server2" value"" /> <!-- Beim anklicken Zabelle für Gildenrangliste. -->
				</div>
 
				<div id="s2_empire_user">
					<label>Reichsrangliste Spieler</label>
					<input type="radio" name="server2" value="" /> <!--  Listet Reichsrangliste auf. -->
				</div>
 
				<div id="s2_übersicht_empire">
					<label>Übersichts-Reichsverteilung</label>
					<input type="radio" name="server2" value="" /> <!-- Listet die Reichsverteilung auf -->
				</div>
 
			</form>
				</div>';
	}
 
}
 
$rankfunc = new rankfunc;
 
?>


Könnte mir dort bei Jemand zur Seite stehen?

MFG


Kann mir dabei evtl einer zur Seite stehen?

3

Tuesday, January 24th 2012, 8:41pm

Habe die Seite schon gehabt, konnte dadrauß aber irgendwie eher weniger mit anfangen.

Weiß nicht wie ich es genau auf meine bedürfnisse umbauen kann, da mir in Java eher noch die Erfahrung fehlt.

:/

4

Tuesday, January 24th 2012, 9:45pm

OT: http://www.webmaster-eye.de/JavaScript-v…59.artikel.html

Nehmen wir als Beispiel deine Spieler-Rangliste. Ich nehme an du hast eine Datenbank mit einer Tabelle, die mit den User-Daten gespeichert sind.

| id | name | points|
| 1 | Jaffa | 1500 |
| 2 | Dark | 8410 |
| 3 | Blub | 3452 |

In deiner *.php-Datei steht jetzt nun folgendes:

PHP Quellcode

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
<?php
 
if(!$isset($_GET['page]'))
{
	die('Fehler');
}
 
//Wird festgelegt, ob jetzt nun die Plätze von 1 bis 10, 10 bis 20 oder sonst abgerufen werden sollen ;)
$plaetze = $_GET['page'];
 
//Verbindung zur Datenbank aufbauen
$con = mysql_connect('localhost', 'Name', 'Passwort');
 
//Hier muss noch eine Fehlerbehandlung hin
 
//Auswahl der Tabelle mit den Userdaten mit einem Pointer auf unseren ersten Datenbankenaufbau
mysql_select_db('Datenbankname', $con);
 
//SQL-Abfrage
$sql = 'SELECT id, name, points FROM user_data ORDER BY points DESC LIMIT 1, '.$plaetze;
$result = mysql_query($sql);
 
//Ausgabe der
while($row = mysql_fetch_array($result))
{
	echo 	'Name	: '.$row['name'].	'<br />'.
			'ID  	: '.$row['id'].		'<br />'.
			'Punkte	: '.$row['points'].	'<br />';
}
 
 
//Schließen der Verbindung
mysql_close($con);
 
 
?>

Das System sollte eigentlich klar sein ;) Aber vorsicht, UNGETESTET! ;)Und nun die AJAX-Abfrage:

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
// from ist der erste Datensatz, von dem ab die nächsten 10 Datensätze ausgegeben werden
// 1 ist hierbei der Default-Wert, wenn kein Wert angegeben wird
 
function showUser(var from = 1)
{
	//IE7+, Firefox, Chrome, Opera, Safari
	if(window.XMLHttpRequest)
	{
		xmlHTTP = new XMLHttpRequest();
	}
 
	//IE6 und IE5
	else
	{
		xmlHTTP = new ActiveXObject('Microsoft.XMLHTTP');
	}
 
	//Funktion, die jedes mal Aufgerufen wird, wenn sich der Status ändert
	//Unserem Objekt wird dadurch die Eigenschaft readyState zugewiesen
	xmlHTTP.onreadystatechange = function()
	{
		if(xmlHTTP.readyState == 4 && xmlHTTP.status == 200)
		{
			/* readyState:
			 * 0: request not initialized
			 * 1: server connection established
			 * 2: request received
			 * 3: processing request
			 * 4: request finished and response is ready
			*/
 
			//Für status gibt es nur 2 Meldungen. 200 bedeutet 'OK', 404 bedeutet, dass die Seite nicht gefunden wurde
 
			//Response-Text ist der RÜckgabewrt, den der Request liefert
			document.getElementById('Deine Div in die, die Table kommen soll').innerHTML = xmlHTTP.responseText;
		}
	}
 
	//Mit der Art des Request. Daten werden angefordert -> Get
	//Danach unsere php-Seite mit der ANgabe, von wo aus die Datensätze ausgegeben werden sollen
	xmlhttp.open('GET',"unserePHPseite.php?page="+from,true);
	xmlhttp.send();
}


Die FUnktion kannst du nun anpassen und überall anwenden, wo du willst. Ich würde dir dennoch empfehlen ein FrameWork wie jQuery zu benutzen, da das wesentlich weniger Code bedeutet und einem viel Arbeit abnimmt.

This post has been edited 1 times, last edit by "JaffaCoder" (Jan 24th 2012, 10:19pm)


Social bookmarks