Datenbank mit Ajax modernisieren

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

  • Datenbank mit Ajax modernisieren

    Hallo Community :)

    Möchte mich kurz vorstellen, heiße Billie und habe Grundkenntnisse in den Programmiersprachen C++, Visual Basic, PHP und schon vielleicht auch in Ajax.

    Nun zu meinem Problem: Ich habe von Apache Friends den lokalen Server (XAMPP), darauf eine Datenbank mit einigen Tabellen. Viele der Tabellen haben bereits über 700 Datensätze.

    Bis jetzt habe ich die Datenbank mit einer in PHP programmierten Oberfläche bearbeitet, sprich - ich kann die Datensätze löschen, editieren und einen neuen Datensatz einfügen. Wie erwähnt, alles in PHP.

    Wegen der Größe ist die Bearbeitung der Datensätze nun immer langsamer geworden. Wenn ich beispielsweise einen Datensatz ändern möchte und ihn dann abspeichere, werden die ganzen anderen 700 Datensätze

    ebenfalls aktualisiert und die Seite komplett neu geladen, obwohl ich nur einen Datensatz geändert habe. Nun möchte ich die gesamte Datenbank mit Ajax-Technologie modernisieren.

    Ich erhoffe mir dadurch, dass wenn ein Datensatz gelöscht, editiert oder geändert wird, die gesamte Tabelle nicht nochmal aktualisiert dargestellt wird, sondern eben nur der eine betroffene Datensatz.

    Nun hab ich bereits schon ein wenig in Ajax programmiert...in einem kleinem Programm kann ich einen neuen Datensatz per Ajax in eine kleine Testtabelle einfügen und mit einem kleinen separaten Skript kann ich "per" Ajax einen Datensatz auslesen.


    Ich wollte euch nun fragen, ob ihr mir helfen könntet, einen Ansatz zu geben, wo ich in den reinen PHP-Skripten Ajax "einbinden" soll.

    Keine Sorge, mein PHP ist recht einfach gestrickt und programmiert, für jede Tabelle in meiner Datenbank hab ich ein separates PHP Skript in dem alle Funktionen (Löschen usw.) stehen. ^^

    Ich hoffe ihr könnt mir helfen und freue mich schon auf euer Feedback.

    PS: Die Ansätze zum Einfügen/Auslesen eines Datensatzes mit Ajax hab ich aus diesem Forum :thumbup:

  • Hey also Ajax kannst du natürlich für die Bearbeitung von bestimmten Datensätzen benutzen. Sprich löschen, bearbeiten, erstellen eines Eintrages der Datenbank.

    Aber für mich hört sich das so an, als ob du immer die kompletten > 700 Einträge ausliest? Wenn ja würde sich vllt eine Aufteilung auf Seiten anbieten. z.B. pro Seite werden nur 50 Datensätze ausgelesen. Würde die Sache schonmal aufjedenfall beschleunigen.

  • Snowflake schrieb:

    Hey also Ajax kannst du natürlich für die Bearbeitung von bestimmten Datensätzen benutzen. Sprich löschen, bearbeiten, erstellen eines Eintrages der Datenbank.


    Das hört sich schon einmal gut an :)

    Snowflake schrieb:


    Aber für mich hört sich das so an, als ob du immer die kompletten > 700 Einträge ausliest? Wenn ja würde sich vllt eine Aufteilung auf Seiten anbieten. z.B. pro Seite werden nur 50 Datensätze ausgelesen. Würde die Sache schonmal aufjedenfall beschleunigen.


    Ja, wenn ich einen Datensatz ändere und speichere, wird die komplette Seite nochmal neu geladen, also liest er jeden Datensatz aus der Tabelle/Datenbank neu aus.

    Wie bereits erwähnt dauert bei der jetzigen Programmierung der Neuaufbau der Seite mittlerweile extrem lange und wenn ich mehrere Datensätze ändern muss, wird das eine zeitintensive Angelegenheit.

    Ich würde deshalb das ganze auf Ajax modernisieren...weil die Datenbank wächst stätig und das wäre die optimale Lösung.

    Ich würde gerne einmal meinen jetztigen Standard-PHP-Skript posten und dann schon einmal die Ajax Grundzüge für Datenbanken.

    Vielleicht könntet ihr mir dann helfen? :)

  • Falls du wirklich alle 700 auf einer Seite haben willst könntest du die Datensätze in DIV Elemente packen und diese bei Bedarf ansprechen:

    Folgende Struktur in der PHP Schleife erstellen, die die Datenbank ausliest:

    Quellcode

    1. <div id="DATEN_1"><span>Datensatz</span><a onClick="ajax('loeschen','1')">LÖSCHEN</a></div>
    2. <div id="DATEN_2"><span>Datensatz</span><a onClick="ajax('loeschen','2')">LÖSCHEN</a></div>
    3. <div id="DATEN_3"><span>Datensatz</span><a onClick="ajax('loeschen','3')">LÖSCHEN</a></div>

    Dann Ajax:

    Quellcode

    1. function ajax(was,id){
    2. ajaxid = id;
    3. action = was;
    4. //erstellen des requests
    5. var req = null;
    7. try{
    8. req = new XMLHttpRequest();
    9. }
    10. catch (ms){
    11. try{
    12. req = new ActiveXObject("Msxml2.XMLHTTP");
    13. }
    14. catch (nonms){
    15. try{
    16. req = new ActiveXObject("Microsoft.XMLHTTP");
    17. }
    18. catch (failed){
    19. req = null;
    20. }
    21. }
    22. }
    24. if (req == null)
    25. alert("Error creating request object!");
    27. //anfrage erstellen (GET, url mit den GET Variablen,
    28. //request ist asynchron
    29. req.open("GET", 'AJAX.php?action='+action+'&id='+ajaxid, true);
    31. //Beim abschliessen des request wird diese Funktion ausgeführt
    32. req.onreadystatechange = function(){
    34. switch(req.readyState) {
    35. case 4:
    36. if(req.status!=200) {
    37. alert("Fehler:"+req.status);
    38. }else{
    39. //schreibe die antwort in den div container mit der richtigen id
    40. document.getElementById('DATEN_'+ajaxid).innerHTML = req.responseText; // HIER WIRD DIE DIV NEU BEFÜLLT: bei Delete mit nichts, bei edit mit aktuellen Daten
    41. }
    42. break;
    44. default:
    45. return false;
    46. break;
    47. }
    48. };
    50. req.setRequestHeader("Content-Type",
    51. "application/x-www-form-urlencoded");
    52. req.send(null);
    53. }
    Alles anzeigen


    In der AJAX.php kannst du nun je nach ankommender action handeln.

    Quellcode

    1. <?php
    2. //AJAX.php
    3. ...
    4. $id = $_GET['id'];
    5. switch ($_GET['action']){
    6. case 'loeschen':
    7. dbquery("DELETE....");
    8. // Keine Ausgabe => Div wird leer
    9. break;
    10. case 'editieren':
    11. dbquery("UPDATE....");
    12. //Wichtig, das wird der akutualisierte Inhalt!!
    13. echo '<span>Datensatz</span><a onClick="ajax(\"loeschen\",\"'.$id.'\")">LÖSCHEN</a>';
    14. break;
    16. }
    17. ?>
    Alles anzeigen


    So grob könnte das funktionieren.
    Ansonsten kann ich dir nur das [wiki]Wiki[/wiki] empfehlen ;)

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von student2312 ()

  • BennyBunny schrieb:

    Warum liest du denn eigentlich alle Einträge auf einmal aus, also wie SnowFlake schon meinte. Mehrere Seiten und pro Seite 20 Einträge o.ä.


    Die Unterteilung würde auch funktionieren, allerdings würden das viele Seiten werden und da nicht nur ich mit der Datenbank arbeite, müssten die anderen Benutzer den richtigen Datensatz auf den einzelnen Seiten

    immer suchen. Außerdem betrachte ich das als gute Gelegenheit meine (noch mageren :S ) Ajax-Kenntnisse zu erweitern und Viel zu lernen.

    @student2312

    Danke für den Ansatz...ich werde jetzt damit arbeiten und versuchen es richtig umzusetzen, könnte aber etwas schwieriger für mich werden.

    Aber schon mal Danke an Alle, die so schnell antworten konnten! :thumbup:

  • Hey. Also das mit der Seitenaufteilung und dem durchsuchen jeder einzelnen Seite, könnte man natürlich auch mit einer (Ajax)-Suche, vereinfachen. Das der User einfach eingibt was für ein Datensatz er gerne hätte.


    Aber da du sagst, du hast nicht so viel Ahnung von Ajax, also es ist wichtig, dass jeder Datensatz aus der Datenbank ein eigenes Element hat (div,span,p usw.) mit einer nicht doppelt vorkommenden ID.
    Das hat dir student2312 ja schon verdeutlicht denke ich.
    Wenn du was von diesem Codeschnipel den student2312 dir gepostet hast nicht verstehst, musst du bescheid sagen. Ich denke hier wird dir versucht alles zu erklären.


    Aber um das mal ein bisschen zu verdeutlichen:

    Quellcode

    1. <div id="DATEN_1"><span>Datensatz</span><a onClick="ajax('loeschen','1')">LÖSCHEN</a></div>

    Das Div hat die ID "DATEN_1" beim klick auf den link, wird die funktion ajax aufgerufen, und die parameter löschen und 1 übergeben.
    Mit denen arbeitet man in der Funktion ajax() weiter.

    Das "löschen" wird als $_GET['action'] an die PHP Datei weitergegeben, um zu unterscheiden welche Aktion du ausführen willst. (löschen, bearbeiten u.s.w)
    Und die ID wird übergeben, damit du dort in PHP weiter arbeiten kannst. Also den bestimmten bearbeiten.
    Die Funktion ajax() arbeitet auch damit weiter und zwar am ende des Ajax Request hilft dir diese ID nur das Div-Element "DATEN_1" zu aktualisieren.


    Und wenn du das alles schon wusstest, auch gut :P

  • Ja die Erklärungen sind etwas kurz gekommen, aber Fußball Champions League stand kurz bevor 8)
    So wie oben würde ich es lösen, es geht sicher auch etwas eleganter.
    Das wichtige ist, dass Du die Schleife findest, die Dir die Datensätze liefert und darin jeden Datensatz mit einer DIV mit eindeutiger ID umgibst.
    So kannst du drauf zugreifen. Snowflake hat ja schon einige Erklärungen geliefert warum und wie.
    Vor dem Javascript Code nicht erschrecken, der Großteil ist eine standard Vorlage.
    Wichtige Teile des Javascripts:
    Hier wird die Datei aufgerufen, die deinen Request bearbeitet. Die Parameter werden mittels normaler GET Funktion übergeben.

    Quellcode

    1. req.open("GET", 'AJAX.php?action='+action+'&id='+ajaxid, true);

    Der Teil schaut verwirrend aus, bedeutet aber nichts anderes als, dass die AJAX.php eine Antwort auf den Request gegeben hat.

    Quellcode

    1. switch(req.readyState) {
    2. case 4:
    3. if(req.status!=200) {
    4. alert("Fehler:"+req.status);
    5. }else{ //Daten kommen verarbeitet zurück

    Hier wird die Ausgabe der AJAX.php in das gewünschte DIV Element eingefügt.

    Quellcode

    1. document.getElementById('DATEN_'+ajaxid).innerHTML = req.responseText;


    Wichtig für die AJAX.php:
    Mit der Datenbank verbinden

    Quellcode

    1. $conn = mysql_connect('localhost','root') or exit(mysql_error());
    2. mysql_select_db('MeineDatenbank', $conn) or exit(mysql_error());

    Wenn die Get Variable ankommt die Daten verarbeiten.

    Quellcode

    1. if(isset($_GET['action'])){
    2. //Hier die Aktionen (z.B. mit switch)
    3. }


    Alles was du auf der Ajax.php ausgibst wird an die Original Datei zurückgeschickt und das Seite Neu Laden entfällt.

    Quellcode

    1. echo 'das zum Beispiel';
    2. //oder auch
    3. echo '<span>DATENSATZ</span><a onClick="....></a>';


    Mir fällt grad auf, dass du zum editieren von Datensätzen evtl. Probleme mit der GET übergabe bekommst . Brauchst du das Script nur zum löschen oder auch zum editieren?

  • student2312 schrieb:



    Mir fällt grad auf, dass du zum editieren von Datensätzen evtl. Probleme mit der GET übergabe bekommst . Brauchst du das Script nur zum löschen oder auch zum editieren?


    Ich möchte damit editieren, löschen und einen komplett neuen Datensatz einfügen können.

    Also, ich habe jetzt eine kleine Testdatenbank angelegt, in der ganz simpel nur eine ID und ein Herstller steht...also z.B ID=1 Hersteller=HP. Davon ein paar Datensätze zum testen, damit es übersichtlich bleibt.

    Ich arbeite jetzt mit zwei PHP-Skripten, einmal die verbindung.php, in der halt die Zugangsdaten zum localen Server sind.

    Quellcode

    1. <?
    2. $dbuser="root";
    3. $dbpass="";
    4. $dbhost="localhost";
    5. $dbname="database";
    7. $Verbindung=mysql_connect($dbhost,$dbuser,$dbpass) or die ("DB Verbindung gescheitert");
    8. $db=mysql_select_db($dbname,$Verbindung) or die ("DB wurde nicht gefunden");
    9. ?>


    Und dann habe ich noch ein Skript, in dem alle Funktionen zum löschen, editieren, neuen Datensatz einfügen und speichern usw. drin sind. Ich hab den einzelnen Abschnitten/Funktionen Überschriften gegeben...

    Quellcode

    1. <html>
    2. <body>
    3. <?
    5. include ("verbindung.php");
    7. //**************Funktion zum Auslesen der Datensätze**************************************************************************
    9. function datenarray ($Abfrage)
    10. {
    11. $res = mysql_query ($Abfrage);
    12. while($daten=mysql_fetch_array($res))
    13. {
    14. $speicher[]=$daten;
    15. }
    16. return $speicher;
    17. }
    19. //*************Löschen********************************************************************************************************
    21. if($_POST["cmd_loeschen"] && $_POST["opt_haken"])
    22. {
    23. $loeschsatz=$_POST["opt_haken"];
    24. foreach($loeschsatz as $delete_id)
    25. {
    26. $Abfrage="delete from pc where id = $delete_id";
    27. echo "$Abfrage<br>";
    28. $res=mysql_query($Abfrage);
    29. }
    30. }
    32. //*************Einfügen*******************************************************************************************************
    34. if($_POST["cmd_einfuegen"])
    35. {
    36. mysql_query("insert into pc (`id`,`hersteller`) values('".$_POST["txt_id"]."','".$_POST["txt_hersteller"]."')");
    37. $res=mysql_query($sql);
    38. }
    40. //*************Ändern und Speichern*******************************************************************************************
    41. if($_POST["cmd_aendern"])
    42. {
    43. $auswahl=$_POST['opt_haken'];
    44. echo "<form action='' method='post'>";
    45. foreach($_POST['opt_haken'] as $id)
    46. {
    47. $abfrage= mysql_query("select * from pc where id=$id");
    49. $data= mysql_fetch_array($abfrage);
    50. echo"<br><br>Hersteller: <input type='Text' name='txt_hersteller[$id]' value='".$data['hersteller']."' size='20' maxlength='30'><br>";
    51. echo"<br>ID: <input type='Text' name='txt_id[$id]' value='".$data['id']."'size='8' maxlength='6'><br>";
    52. }
    53. echo"<br><input type='Submit' name='cmd_speichern' value='Speichern'>";
    54. echo"</form>";
    55. }
    57. elseif($_POST["cmd_speichern"])
    58. {
    59. foreach($_POST["txt_hersteller"] as $changeid => $neu)
    60. {
    61. $Abfrage="update pc set hersteller='$neu' where id=$changeid";
    62. mysql_query($Abfrage);
    63. }
    65. foreach($_POST["txt_id"] as $changeid => $neu)
    66. {
    67. $Abfrage="update pc set id='$neu' where id=$changeid";
    68. mysql_query($Abfrage);
    69. }
    70. }
    71. //****************************************************************************************************************************
    72. $Abfrage = "select * from pc order by id";
    73. $daten = datenarray($Abfrage);
    74. $anz = count($daten);
    75. ?>
    77. <h2>Tabelle: PC</h2>
    78. <form action="" method="post">
    79. <?
    81. echo"<table border=1>";
    82. echo"<tr>
    83. <th></th>
    84. <th>ID</th>
    85. <th>Hersteller</th>
    86. </tr>";
    88. for ($i=0;$i<$anz;$i++)
    89. {
    90. echo "<tr>
    91. <td><input type='checkbox' name='opt_haken[]' value='".$daten[$i]["id"]."'></td>
    92. <td>".$daten[$i]["id"]."</td>
    93. <td>".$daten[$i]["hersteller"]."</td>
    94. </tr>";
    95. }
    96. echo "</table>";
    99. echo "<br><input type='Submit' name='cmd_loeschen' value='Löschen'></input>";
    100. echo "<br><br><input type='Submit' name='cmd_aendern' value='Ändern'>";
    101. echo "<br><br><h4>Neuen Datensatz einfügen</h4>";
    102. echo "Hersteller: <input type='text' name='txt_hersteller' value='$abschluesse'size='20' maxlength='50'></input>";
    103. echo "<br>ID:<input type='text' name='txt_id' size='20' maxlength='5'>";
    104. echo "<br><br><input type='Submit' name='cmd_einfuegen' value='Einfügen'>";
    105. ?>
    106. </body>
    107. </html>
    Alles anzeigen


    Ich werde dann jetzt mal versuchen, das umzusetzen, was ihr mir geschrieben habt :)

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von Billie ()

  • Also ich habe jetzt mal ein wenig rumporbiert und die ersten Schwierigkeiten bekommen. Wie ihr an meinem Quellcode erkennen könnt, frage ich einfach ab, ob ein Häkchen gesetzt und ein Button gedrückt wurde. Das Frage ich dann mit "if" für die einzelnen Operationen ab. Dann habe ich das Problem, jeden Datensatz in ein Div Feld zu packen...ich versteh 100%ig wozu man das braucht, allerdings weiss ich nicht, wie ich das bei mir einbinden soll und das jedes Div eine andere ID bekommt. Bei mir liefert die funktion "datenarray" die Datensätze, allerdings geh ich davon aus, dass ich irgendwo in Zeile 72-73 die Div-Elemente erstellen muss?

    Denn JavaScript Code habe ich einfach übernommen, in der Art und Weise hatte ich ihn bei meinen bisherigen Ajax Anwendungen ebenfalls...scheint also irgendwo standard zu sein. @student 2312 - Danke für die ausführliche Beschreibung, wieder mehr verstanden :thumbup:

    Nun zur AJAX.php...bei eurer Vorgabe stehen in dem Skript auch die Befehle, um den Datensatz zu bearbeiten (DELETE, UPDATE....), allerdings hab ich da wegen den if-Abfragen Probleme.

    Könnt ihr mir da nochmal helfen?

  • Hm ich bin wirklich nicht sicher, ob das mit AJAX am besten gelöst ist... Löschen und Hinzufügen wäre kein Problem, aber wenn du Editieren willst, wird es dann schon deutlich aufwendiger weil du zu jedem Datensatz ein Textfeld brauchst, dass dann erscheint. Im Moment ist das ja so bei dir:

    Datensatz1
    Datensatz2
    ...
    Datensatz700
    ___________
    löschen/editieren/hinzufügen -> Klickt man editieren wird die Seite neu geladen und es erscheinen die benötigten Textfelder:

    edit1
    edit56 -> Abschicken -> cmd_speichern und die Daten werden eingetragen
    Datensatz1
    Datensatz2
    ...
    Datensatz700
    ___________
    löschen/editieren/hinzufügen

    Da mit Ajax die Seite nicht neu lädt, müsstest du z.B. mit createElement() dynamisch Textfelder erstellen oder du versteckst unter den einzelnen Datensätzen 700 Textfelder, die dann bei Bedarf eingeblendet werden. Ich glaube ohne Javascript Vorkenntnisse wird das Alles sehr sehr aufwendig die dann richtig zu erzeugen und in den Ajax request zu integrieren (ich wüsste aus dem Stehgreif auch nicht wie das am besten zu lösen wäre).

    Ich glaube es ist fast sinnvoller das bestehende Format noch zu optimieren. Ich finde deine aktuelle Lösung eigentlich sehr ordentlich. Einige Vorschläge dazu:
    - Seitenzahlen - z.B in 100ter Schritten. Ich denke (ohne zu wissen was die Daten sind), dass tendentiell eher die neueren Daten verändert werden und seltener Nr. 695.
    - Deine verschiedenen Optionen fixieren: mit der CSS Eigenschaft position:fixed hast du die Optionen immer verfügbar und musst nicht jedesmal ganz nach unten scrollen:

    Quellcode

    1. echo '<div style="position:fixed;bottom:50px;">';
    2. echo "<br><input type='Submit' name='cmd_loeschen' value='Löschen'></input>";
    3. echo "<br><br><input type='Submit' name='cmd_aendern' value='Ändern'>";
    4. echo "<br><br><h4>Neuen Datensatz einfügen</h4>";
    5. echo "Hersteller: <input type='text' name='txt_hersteller' value='$abschluesse'size='20' maxlength='50'></input>";
    6. echo "<br>ID:<input type='text' name='txt_id' size='20' maxlength='5'>";
    7. echo "<br><br><input type='Submit' name='cmd_einfuegen' value='Einfügen'>";
    8. echo '</div>';

    - eine Suchfeld, was die Hersteller durchsucht - Wenn man doch mal die Nr 695 sucht.

    Denke das sind sinnvolle Erweiterungen, die die Ajax Vorteile kompensieren können und wohl deutlich umgänglicher sind.

    Was auch noch eine Möglichkeit wäre:
    Auf der Seite werden NUR z.B. die neuesten 100-200 Daten gezeigt. Und falls man doch alle 700 sehen will ist am Ende ein button hierfür. So würde im Normalfall nur das aktuelle geladen und falls man wirklich mal alle auf einmal sehen will kann man das bei Bedarf machen. Dadurch würden beim editieren etc nicht immer alle geladen werden.

    PS: Wenn man auf editieren klickt, ist es glaube ich überflüssig nochmal alle Datensätze drunter zu laden, man will ja nur editieren.
    Das könntest du in Zeile 72 einfügen:

    Quellcode

    1. if(!isset($_POST["cmd_aendern"])){
    2. #Datensätze laden#
    3. }

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von student2312 ()

  • student2312 schrieb:

    Hm ich bin wirklich nicht sicher, ob das mit AJAX am besten gelöst ist... Löschen und Hinzufügen wäre kein Problem, aber wenn du Editieren willst, wird es dann schon deutlich aufwendiger weil du zu jedem Datensatz ein Textfeld brauchst, dass dann erscheint.


    Da gebe ich Dir recht, die Geschichte mit dem Editieren ist sicherlich kompliziert.

    Ich würde trotzdem gerne versuchen, zunächst nur das Löschen und Hinzufügen eines Datensatzes in Ajax zu lösen, weil ich habe auch Tabellen, die jetzt nicht so groß sind und über 700 Datensätze haben, wobei hier der der größte Vorteil mit Ajax sein würde.

    Das würde ich dann zunächst auf einer kleinen Datenbank, wie oben gepostet, testen.

    Ich bin mir nicht sicher, kann ich das in das bestehende PHP-Skript "einbauen" oder soll ich erstmal klein anfangen? Ich würde am liebsten erstmal klein anfangen und nur Löschen und Hinzufügen machen...danach kann man vielleicht noch mit dem Editieren schauen, allerdings würde ich mich sehr über Löschen und Hinzufügen freuen :)

  • Ich kann dir einen Vorschlag machen, wie du deine Struktur aufbauen kannst, ansonsten ist im [wiki]wiki[/wiki] ein wirklich hervorragendes Beispiel wie man mittels Ajax Daten via POST verschicken kannst. Ich schaffe heute nur löschen (ist schon spät).
    Schritt 1 wichtige Elemente kennzeichnen, damit wir später darauf zugeifen können:

    Quellcode

    1. echo"<table border=1 id='tabelle'>";
    2. for ($i=0;$i<$anz;$i++)
    3. {
    4. echo "<tr id='spalte".$daten[$i]["id"]."'>
    5. <td><input type='checkbox' name='opt_haken[]' value='".$daten[$i]["id"]."'></td>
    6. <td>".$daten[$i]["id"]."</td>
    7. <td>".$daten[$i]["hersteller"]."</td>
    8. </tr>";
    9. }
    10. echo "</table>";

    Dann brauchst du aus dem Wiki die Funktionen ajaxPost() und getFormData()
    Funktion erweitern um die Aktion:

    Quellcode

    1. function ajaxPost(url, postData, callback, action) {


    So rufst du die Funktionen auf:

    Quellcode

    1. echo "<br><input type='button' name='cmd_loeschen' value='Löschen' onClick='ajaxPost(\'ajax.php\', \'ajax&\'+getFormData(\'opt_haken\'),\'tabelle\',\'loeschen\');'>";
    2. echo "<br><br><input type='Submit' name='cmd_aendern' value='Ändern'>";
    3. echo "Hersteller: <input type='text' name='txt_hersteller' value='$abschluesse'size='20' maxlength='50' id='insert_text'>";
    4. echo "<br>ID:<input type='text' name='txt_id' size='20' maxlength='5' id='insert_text'>";
    5. echo "<br><br><input type='button' name='cmd_einfuegen' value='Einfügen' onClick='ajaxPost(\'ajax.php\', \'ajax&\'+getFormData(\'opt_haken\')+\'&neuer_text=\'+insert_text.value,\'tabelle\',\'einfuegen\');'>";

    In der ajaxPost Funktion die Aktionen verarbeiten:

    Quellcode

    1. req.open('POST', url+'?myaction='+action, true);

    in der ajax.php kommt die action und die Daten an:

    Quellcode

    1. $action = $_GET['myaction'];
    2. switch($action){
    3. case 'loeschen':
    4. if($_POST['opt_haken']){
    5. $loeschsatz=$_POST["opt_haken"];
    6. foreach($loeschsatz as $delete_id)
    7. {
    8. $Abfrage="delete from pc where id = $delete_id";
    9. echo "$Abfrage<br>";
    10. $res=mysql_query($Abfrage);
    11. }
    12. }
    13. break;
    14. case 'einfuegen':
    15. break;
    16. }
    Alles anzeigen

    Nun musst du die Elemente noch aus der Oberfläche löschen dazu wieder in die Ajax Funktion:

    Quellcode

    1. req.onreadystatechange = function() {
    2. if (req.readyState == 4 && req.status == 200) {
    3. if(action == 'loeschen'){
    4. /*Elemente verstecken - wieder mit einem Teil der getFormData Funktion (umständlich)*/
    5. for(var i=0; i<document.getElementById('tabelle').elements.length; i++) {
    6. var el = form.elements[i];
    7. var type = (el.type || '');
    9. if(type.match(/^(text|hidden|textarea)$/i) || (type.match(/^(radio|checkbox)$/i) && el.checked)) {
    10. add(el.name, el.value);
    11. } else if(el.nodeName.match(/^select$/i)) {
    12. for(var j=0; j<el.options.length; j++) {
    13. if(el.options[j].selected) {
    14. /*Sollte die gewünschten Spalten verstecken*/
    15. document.getElementById('spalte'+el.options[j].value).style.display = 'none';
    16. }
    17. }
    18. }
    19. }
    21. }
    22. }
    23. };
    Alles anzeigen

    Soviel als Tip von meiner Seite, jetzt musst Du schauen, wie du das am besten bei Dir integrierst. Vorsicht, es hat sich sicher der ein oder andere Syntax Fehler eingeschlichen - ist ungetestet und teilweise etwas umständlich ^^.
    Für den Javascript debug: firebug

    Viel Erfolg

  • Ich habe Deine Vorschläge versucht zu integrieren und habe bis jetzt folgendes.

    Die JavaScript-Datei

    Quellcode

    1. function ajaxPost(url, postData, callback, action) {
    3. var req;
    4. try {
    5. req = window.XMLHttpRequest ? new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP");
    6. } catch (e) {
    7. req = null;
    9. if (req == null)
    10. alert("Error creating request object!");
    11. }
    12. req.onreadystatechange = function() {
    13. if (req.readyState == 4 && req.status == 200) {
    14. if(action == 'loeschen'){
    16. for(var i=0; i<document.getElementById('tabelle').elements.length; i++) {
    17. var el = form.elements[i];
    18. var type = (el.type || '');
    20. if(type.match(/^(text|hidden|textarea)$/i) || (type.match(/^(radio|checkbox)$/i) && el.checked)) {
    21. add(el.name, el.value);
    22. } else if(el.nodeName.match(/^select$/i)) {
    23. for(var j=0; j<el.options.length; j++) {
    24. if(el.options[j].selected) {
    25. document.getElementById('spalte'+el.options[j].value).style.display = 'none';
    26. }
    27. }
    29. if(typeof callback == 'string') callback = document.getElementById(callback);
    30. if(callback) callback.innerHTML = req.responseText;
    31. }
    32. }
    34. }
    35. }
    36. };
    38. req.open('POST', url+'?myaction='+action, true);
    39. req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    40. req.send(postData);
    42. return false;
    43. }
    Alles anzeigen


    und so sieht z.Z die PHP-Datei aus

    Quellcode

    1. <html>
    2. <body>
    3. <?
    5. include ("verbindung.php");
    7. //**************Funktion zum Auslesen der Datensätze**************************************************************************
    9. function datenarray ($Abfrage)
    10. {
    11. $res = mysql_query ($Abfrage);
    12. while($daten=mysql_fetch_array($res))
    13. {
    14. $speicher[]=$daten;
    15. }
    16. return $speicher;
    17. }
    19. //*************Operationen****************************************************************************************************
    21. $action = $_GET['myaction'];
    22. switch($action){
    23. case 'loeschen':
    24. if($_POST['opt_haken']){
    25. $loeschsatz=$_POST["opt_haken"];
    26. foreach($loeschsatz as $delete_id)
    27. {
    28. $Abfrage="delete from tabelle where id = $delete_id";
    29. echo "$Abfrage<br>";
    30. $res=mysql_query($Abfrage);
    31. }
    32. }
    33. //break;
    34. //case 'einfuegen':
    35. //break;
    36. }
    38. //*************Einfügen*******************************************************************************************************
    40. if($_POST["cmd_einfuegen"])
    41. {
    42. mysql_query("insert into pc (`id`,`hersteller`) values('".$_POST["txt_id"]."','".$_POST["txt_hersteller"]."')");
    43. $res=mysql_query($sql);
    44. }
    46. //****************************************************************************************************************************
    48. $Abfrage = "select * from tabelle order by id";
    49. $daten = datenarray($Abfrage);
    50. $anz = count($daten);
    51. ?>
    53. <h2>Tabelle: Hersteller</h2>
    54. <form action="" method="post">
    55. <?
    57. echo"<table border=1 id='tabelle'>";
    60. for ($i=0;$i<$anz;$i++)
    61. {
    62. echo "<tr id='spalte".$daten[$i]["id"]."'>
    63. <td><input type='checkbox' name='opt_haken[]' value='".$daten[$i]["id"]."'></td>
    64. <td>".$daten[$i]["id"]."</td>
    65. <td>".$daten[$i]["title"]."</td>
    66. </tr>";
    67. }
    68. echo "</table>";
    71. echo "<br><input type='button' name='cmd_loeschen' value='Löschen' onClick='ajaxPost(\'ajax.php\', \'ajax&\'+getFormData(\'opt_haken\'),\'tabelle\',\'loeschen\');'>";
    72. echo "<br><br><input type='Submit' name='cmd_aendern' value='Ändern'>";
    73. echo "Hersteller: <input type='text' name='txt_hersteller' value='$abschluesse'size='20' maxlength='50' id='insert_text'>";
    74. echo "<br>ID:<input type='text' name='txt_id' size='20' maxlength='5' id='insert_text'>";
    75. echo "<br><br><input type='button' name='cmd_einfuegen' value='Einfügen' onClick='ajaxPost(\'ajax.php\', \'ajax&\'+getFormData(\'opt_haken\')+\'&neuer_text=\'+insert_text.value,\'tabelle\',\'einfuegen\');'>";
    76. ?>
    77. </body>
    78. </html>
    Alles anzeigen


    Ich habe aus der PHP Datei das Editieren und Speichern erstmal entfernt, damit es übersichtlicher wird.

    Beim Ausführen werden schon mal die Datensätze geladen, wenn ich jedoch nun einen Datensatz löschen will, zeigt Firebug einen Fehler in der ersten Zeile der ajax.php an ("illegal character" => ajaxPost(\ ajax.php Linie1)

  • student2312 schrieb:

    Ja, da gehört es auch hin.
    Funktioniert es mit /" statt /'?


    Wenn ich es mit /" ausprobiere, bekomme ich folgende Fehlermeldung

    ajaxPost is not defined
    onclick(click clientX=41, clientY=188)lOA7BsQY...j2Q%3D%3D (Linie 2)
    [Break on this error] ajaxPost("ajax.php", "ajax&" + g...ta("opt_haken"), "tabelle", "loeschen");

    Meines Wissens sollte /' richtig sein.

    Ich habe folgenden Code jetzt auch in den Java-Skript Code eingefügt, allerdings kommt immer noch die gleiche Fehlermeldung.

    Ich bin mir aber nicht sicher, ob ich das richtig gemacht habe...ich weiß, ich nerve euch schon ^^

    Quellcode

    1. function ajaxPost(url, postData, callback, action) {
    3. var req;
    4. try {
    5. req = window.XMLHttpRequest ? new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP");
    6. } catch (e) {
    7. req = null;
    9. if (req == null)
    10. alert("Error creating request object!");
    11. }
    12. req.onreadystatechange = function() {
    13. if (req.readyState == 4 && req.status == 200) {
    14. if(action == 'loeschen'){
    16. ajaxPost(\'ajax.php\', \'ajax&\'+getFormData(\'opt_haken\'),\'tabelle\',\'loeschen\'); <== den hier meine ich
    17. for(var i=0; i<document.getElementById('tabelle').elements.length; i++) {
    18. var el = form.elements[i];
    19. var type = (el.type || '');
    21. if(type.match(/^(text|hidden|textarea)$/i) || (type.match(/^(radio|checkbox)$/i) && el.checked)) {
    22. add(el.name, el.value);
    23. } else if(el.nodeName.match(/^select$/i)) {
    24. for(var j=0; j<el.options.length; j++) {
    25. if(el.options[j].selected) {
    26. document.getElementById('spalte'+el.options[j].value).style.display = 'none';
    27. }
    28. }
    30. if(typeof callback == 'string') callback = document.getElementById(callback);
    31. if(callback) callback.innerHTML = req.responseText;
    32. }
    33. }
    35. }
    36. }
    37. };
    39. req.open('POST', url+'?myaction='+action, true);
    40. req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    41. req.send(postData);
    43. return false;
    44. }
    Alles anzeigen

  • Nene, da gehört es nicht hin, nur in den PHP Teil! Das Ding mit dem /" ist ja nur weil es verschachtelte Anführungszeichen sind.
    Und das ajaxPost wird auch nur im PHP Teil aufgerufen, und nicht noch einmal in der Funktion.

    Quellcode

    1. function ajaxPost(url, postData, callback, action) {
    2. var req;
    3. try {
    4. req = window.XMLHttpRequest ? new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP");
    5. } catch (e) {
    6. req = null;
    8. if (req == null)
    9. alert("Error creating request object!");
    10. }
    11. req.onreadystatechange = function() {
    12. if (req.readyState == 4 && req.status == 200) {
    13. if(action == 'loeschen'){
    14. for(var i=0; i<document.getElementById('tabelle').elements.length; i++) {
    15. var el = tabelle.elements[i];
    16. var type = (el.type || '');
    17. if(type.match(/^(checkbox)$/i) && el.checked)) { //Nicht ganz sicher hier
    18. document.getElementById('spalte'+el.value).style.display = 'none';
    19. }
    20. }
    21. }
    22. }
    23. }
    25. req.open('POST', url+'?myaction='+action, true);
    26. req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    27. req.send(postData);
    29. return false;
    30. }
    Alles anzeigen

    So könnte der JS Teil ausschauen (ohne Garantie, pass auf Syntaxfehler auf), jetzt musst du die Funktion noch richtig aufrufen.