Übergabe eines Value zur Datenbankabfrage !?

Clubingman · 11. Mai 2006, 17:24

HI!

Bin neu hier u. starte gerade meinen ersten Versuch mit ajax. Wer kann mir eine ganz einfache Übergabe eines Values anhand folgendem Code zeigen u. erklären!?

Die zweite Frage ist ob das ganze so funktioniert in Bezug auf auf die PHP-Abfrage u. dem Auslesen mehrerer Werte!?

Bin echt dankbar wenn mir das jemand anhand dieses Codes erklären kann:

HTML - file

Quellcode

<div style="float: left; margin-right: 30px;">
<label for="select1">Please select</label>
<br />
<select id="select1" size="5" onchange="checkNumber(value)">
<option value="1">Player 1</option>

PHP-file

Quellcode

<?
function checkNumber(value)
{
pg_connect("host=localhost dbname=liverpoolfc user=u045724235 password=12") or die("Connection to database failed!\n");
$tbl_players="players";
$query=pg_fetch_object(pg_query("SElECT number, name, position FROM $tbl_players WHERE number='".$_POST["value"]."'"));
$player_number = $query->number;
$player_name = $query->name;
$player_position = $query->position;
echo $player_number;
echo $player_name;
echo $player_position;
}
?>

Alles anzeigen

JS-file

Quellcode

function checkNumber() {
var url = "getPlayers.php";
//url = url + "?dummy=" + new Date().getTime();
request.open("GET", url, true);
request.onreadystatechange = updatePage;
request.send(null);
}
function updatePage() {
if (request.readyState == 4)
{
if (request.status == 200)
{
var newnumber = request.responseText;
var newname = request.responseText;
var newposition = request.responseText;
var numberEl = document.getElementById("number");
var nameEl = document.getElementById("name");
var positionEl = document.getElementById("position");
replaceText(numberEl, newnumber);
replaceText(playerEl, newname);
replaceText(positionEl, newposition);
}
else
{
var message = request.getResponseHeader("Status");
if ((message == null) || (message.length <= 0))
{
alert("Error! Request status is " + request.status);
} else {
alert(message);
}
}
}
}

Alles anzeigen

So, wo und was muss ich ändern???

VIELEN DANK
Jens

Torben Brodt · 11. Mai 2006, 18:50

hast du den code selbst geschrieben oder kopiert?
wenn du mit ajax mehre inhalte aus einer datei laden willst, dann schau dir besser mal dieses how to an

[coderwiki]HowTos/Ajax-Inhalte-mit-PHP-nachladen[/coderwiki]

falls du mit deinem code weiterarbeiten willst
* nutzt du wirklich postgresql?
* warum weist du mehreren javascript variablen den selben inhalt zu?
* was machst du dann mit dem javascript inhalt?
* du hast die php-funktion nicht aufgerufen

Clubingman · 11. Mai 2006, 19:58

Hi,

Ja, wir nutzen hier an der uni [coderwiki]Informationen/PostgreSQL[/coderwiki] - leider..

Wir sollen uns an dem Code von "Head Rush Ajax" orientieren.

Das Problem für mich ist der value u. der damit verbundene PHP-Funktionsaufruf

So soll das Ganze aussehn:

Quellcode

<form name="ajaxtest" id="ajaxtest" method="post" action="#" onsubmit="return false;">
<div style="float: left; margin-right: 30px;">
<label for="select1">Please select</label>
<br />
<select id="select1" size="5" onchange="getNumber(this)">
<option value="1">Player 1</option>
<option value="2">Player 2</option>
<option value="3">Player 3</option>
<option value="4">Player 4</option>
<option value="5">Player 5</option>
<option value="6">Player 6</option>
</select>
</div>
</form>
<div id="players">
<table>
<tr>
<td>Player Number</td>
<td>Name</td>
<td>Position</td>
</tr>
<tr>
<td><span id="number">1</span></td>
<td><span id="name">Jerzy Dudek</span></td>
<td><span id="position">Goalkeeper</span></td>

Alles anzeigen

ok, geht das denn hier eher in die richtung bezgl. der value übergabe!?

Quellcode

function getNumber( objSelect )
{
var strURL = objSelect.options[ objSelect.options.selectedIndex ].value;
getPlayer( strURL );
}
function getPlayer() {
var url = "getPlayers.php";
//url = url + "?dummy=" + new Date().getTime();
request.open("POST", url, true);
request.onreadystatechange = updatePage;
request.send(null);
}
function updatePage() {
if (request.readyState == 4)
{
if (request.status == 200)
{
var newnumber = request.responseText;
var newname = request.responseText;
var newposition = request.responseText;
var numberEl = document.getElementById("number");
var nameEl = document.getElementById("name");
var positionEl = document.getElementById("position");
replaceText(numberEl, newnumber);
replaceText(nameEl, newname);
replaceText(positionEl, newposition);
}

Alles anzeigen

und so sieht die dom geschichte aus:

Quellcode

function replaceText(el, text) {
if (el != null) {
clearText(el);
var newNode = document.createTextNode(text);
el.appendChild(newNode);
}
}
function clearText(el) {
if (el != null) {
if (el.childNodes) {
for (var i = 0; i < el.childNodes.length; i++) {
var childNode = el.childNodes[i];
el.removeChild(childNode);
}
}
}
}
function getText(el) {
var text = "";
if (el != null) {
if (el.childNodes) {
for (var i = 0; i < el.childNodes.length; i++) {
var childNode = el.childNodes[i];
if (childNode.nodeValue != null) {
text = text + childNode.nodeValue;
}
}
}
}
return text;
}

Alles anzeigen

Quellcode

<?
pg_connect("host=localhost dbname=liverpoolfc user=u045724235 password=12") or die("Connection to database failed!\n");
$tbl_players="players";
$query=pg_fetch_object(pg_query("SElECT number, name, position FROM $tbl_players WHERE number='".$_POST["value"]."'"));
$player_number = $query->number;
$player_name = $query->name;
$player_position = $query->position;
echo $player_number;
echo $player_name;
echo $player_position;
?>

Alles anzeigen

Hoffe es gibt dennoch eine einfach Lösung hier !?

Torben Brodt · 11. Mai 2006, 20:46

also in deiner javascript musst du noch die url anpassen
var url = "getPlayers.php?select="+document.getElementById('select1');

in der php fuktion fehlt das $
also checkNumber($value)

außerdem musst du die php funktion natürlich ausgeben
echo checkNumber($_GET['select']) ;

nach dem rest musst du nochmal schauen..

Clubingman · 11. Mai 2006, 21:23

Danke, werd mich gleich nochmal ran machen.

Habe diese checkNumber() in umbenannt in getNumber() u. verändert, so das diese dann die getPlayers() aufruft. Ist dieser Weg auch möglich?

Werde es jetzt jedenfalls mal so versuchen wie du es beschrieben hast.
Und die checkNumber() muss im php-file ausgegeben werden, oder!?

Kannst du mir noch ein Hinweis geben was genau geändert werden muss???

Will u. muss das heute noch zum laufen bekommen irgendwie eben

Clubingman · 11. Mai 2006, 23:47

Ok, ich hab versucht die einzelnen Schritte nachzuvollziehn u. bin zu diesem Ergebnis (oder was auch immer) gekommen:
Muss hinzufügen das ich den bisherigen Code umgeschmissen habe.

1. bei Klick auf z.B "Player 2" wird die JS-Function getNumber() aufgerufen:
Allerdings weiss ich nicht ob hier (this) oder (value) eingetragen werden muss!? Wird sich hoffentlich noch klären.

Quellcode

<form name="ajaxtest" id="ajaxtest" method="post" action="#" onsubmit="return false;">
<div style="float: left; margin-right: 30px;">
<label for="select1">Please select</label>
<br />
<select id="select1" size="5" onchange="getNumber(this)">
<option value="1">Player 1</option>
<option value="1">Player 1</option>

2. JS-file "player.js"

Hier ist mir jetzt nicht klar ob etwas in in getNumber() eingetragen werden muss da ich mit select1 nicht weiss was anfangen!?

Quellcode

function getNumber() {
var url = "getPlayers.php?select="+document.getElementById('select1'); <-- Für was benötigt??? -->
request.open("GET", url, true);
request.onreadystatechange = updatePage;
request.send(null);
}
function updatePage() {
if (request.readyState == 4)
{
if (request.status == 200) <-- hier sollen die Element der Tabelle ausgetauscht werden -->
{
var newnumber = request.responseText;
var newname = request.responseText;
var newposition = request.responseText;
var numberEl = document.getElementById("number");
var nameEl = document.getElementById("name");
var positionEl = document.getElementById("position");
replaceText(numberEl, newnumber);
replaceText(nameEl, newname);
replaceText(positionEl, newposition);
}
else
{
var message = request.getResponseHeader("Status");
if ((message == null) || (message.length <= 0))
{
alert("Error! Request status is " + request.status);
} else {
alert(message);
}
}
}
}

Alles anzeigen

3. PHP-file "getPlayer.php"
Was wird hier jetzt übergeben der "value" 2 aus dem tag "option" oder der Wert von " ?select="+document.getElementById('select1') " aus der JS-Funktion!?

Folglich welcher Wert wird verwendet zum abgleichen der Daten aus der DB und wie sieht das hier aus???

Quellcode

<?
pg_connect("host=localhost dbname=liverpoolfc user=u045724235 password=12") or die("Connection to database failed!\n");
$tbl_players="players";
$query=pg_fetch_object(pg_query("SElECT number, name, position FROM $tbl_players WHERE number='".$_GET['select']."'"));
$player_number = $query->number;
$player_name = $query->name;
$player_position = $query->position;
echo $player_number; <-- Datenausgabe -->
echo $player_name;
echo $player_position;
}
?>

Alles anzeigen

4. DOM-file text-utils.js
Hier müssten keine Änderungen vorgenommen werden, oder???

Quellcode

function replaceText(el, text) {
if (el != null) {
clearText(el);
var newNode = document.createTextNode(text);
el.appendChild(newNode);
}
}
function clearText(el) {
if (el != null) {
if (el.childNodes) {
for (var i = 0; i < el.childNodes.length; i++) {
var childNode = el.childNodes[i];
el.removeChild(childNode);
}
}
}
}
function getText(el) {
var text = "";
if (el != null) {
if (el.childNodes) {
for (var i = 0; i < el.childNodes.length; i++) {
var childNode = el.childNodes[i];
if (childNode.nodeValue != null) {
text = text + childNode.nodeValue;
}
}
}
}
return text;
}

Alles anzeigen

Wär echt Klasse wenn mir jemand weiterhilft, dann kann ich morgen nachmittag doch noch was präsentieren....

Cheers
Jens

Torben Brodt · 12. Mai 2006, 18:51

<select id="select1" size="5" onchange="getNumber(this)">

das this musst du nicht übergeben - du liest es ja direkt mit getElementById aus

var url = "getPlayers.php?select="+document.getElementById('select1'); <-- Für was benötigt??? -->

weder kannst du die php funktion direkt aufrufen, noch kann php auf die JS variablen zugreifen. daher übergibst du den wert per GET

[...]ion;
}
?>

wo kommt denn die geschweifte klammer her?

in der text-utils.js würd ich lieber den inhalt eines divs mit innerHtml ändern.
mit createTextNode wird ja immer was neues erstellt..
bei 10 änderungen in der <select> wirst du also 10 elemente untereinander haben, oder?

Übergabe eines Value zur Datenbankabfrage !?

Übergabe eines Value zur Datenbankabfrage !?

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Teilen

Tags