• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Probleme beim Einstieg in Ajax

bodo92

Aktives Mitglied
Guten Tag zusammen,

ich habe ein paar Startschwierigkeiten mit Ajax:

Zum Lernen habe ich mir zum einen zwei Buttons erstellt mit denen ich mir Datum und Uhrzeit anzeigen lasse:
Es funktioniert auch wie gewollt, jedoch beim zweiten drücken des Buttons lädt die Seite den schon zuvor geladenen Inhalt. ( Hat das mit meinem Browser zu tun oder hab ich einen Fehler gemacht! )
http://87.106.6.247/entwicklung/ajax/

index.php
HTML:
<!DOCTYPE HTML>
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>Entwicklungsumgebung für jQuery - Ajax</title>
      <style type="text/css">
         .datum_zeit {
            border-widht: 1px;
            border-style: solid;
            border-color: red;
            background-color: yellow;
            display: none;
         }
      </style>
      <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
      <script type="text/javascript">
         function loadFrame(id, value) {
            $.get('./load.php?value='+value, function(data) {
               $('#'+id).fadeIn('slow');
               $('#'+id).html(data);
            })
         }
      </script>
   </head>
   <body>
      <table>
      <tr>
      <td>
         <button onclick="loadFrame('frame1', 'datum')">Datum</button>
      </td>
      <td>
         <div class="datum_zeit" id="frame1"></div>
      </td>
      </tr>
      <tr>
      <td>
         <button onclick="loadFrame('frame2', 'zeit')">Uhrzeit</button>
      </td>
      <td>
         <div class="datum_zeit" id="frame2"></div>
      </td>
      </tr>
      </table>
   </body>
</html>

load.php
PHP:
<?php

$value = $_GET['value'];

switch ($value) {

case "datum":
   $date = date("d.m.Y");
   echo $date;
break;

case "zeit":
   $time = date("H:i:s");
   echo $time;
break;

default:
   echo "FEHLER";
}
?>

-----------------------------------------------------------------------------------------------------------------------------------------------------------

Zum zweiten wollte ich eine Website mit nachladendem Content erstellen:
Gleiche Problem wie oben ( ändere ich in der Textdatei die mittels anfrage Übertragen wird zeigt sich die Änderung auf der Website nicht. )
Ich habe auch das "JQuery Address Plugin" eingebunden jedoch ohne Erfolg!
http://87.106.6.247/eckardts/v1.1/

index.html
HTML:
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Willkommen</title>
        <style type="text/css">
            html, body {
                background-color: #333;
            }
          
            #container {
                width: 900px;
                margin: 0 auto 0 auto;
                padding: 10px;
                background-color: #FFF;
                border: 1px solid #000;
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
            }
          
            #navi {
                border-bottom: 2px solid #333;
            }
          
            #content {
                margin-top: 10px;
                font-family: sans-serif;
                font-size: 16px;
            }
          
            #navi ul {
                list-style: none;
                text-align: center;
            }
          
            #navi ul li {
                display: inline;
                padding-right: 15px;
            }
          
            #navi ul li a {
                font-family: sans-serif;
                font-size: 24px;
                color: #000;
                text-decoration: none;
            }
          
            #navi ul li a:hover {
                border-bottom: 3px solid #000;
            }
        </style>
        <script type="text/javascript" src="jquery-1.11.0.js"></script>
        <script type="text/javascript" src="jquery.address-1.5.min.js"></script>
        <script type="text/javascript">
            var object = null;
            var Objectdata = false;
          
            function loadContent(page) {
                $.get(page+'.txt', function(data) {
                    if (data) {
                        Objectdata = data;
                        $('#content').fadeOut(function() {
                            $('#content').html(Objectdata).fadeIn();
                        });
                        $('title').html(object);
                    } else {
                        $('#content').fadeOut(function() {
                            $('#content').html("Es wurde keine Seite gefunden!").fadeIn();
                        });
                        $('title').html("Error 404");
                    }
                });
            }
          
            $(document).ready(function(e) {
                $('.naviLink').click(function(e) {
                    object = e.currentTarget.innerHTML;
                    Objectdata = false;
                    loadContent(object);
                    e.preventDefault();
                });
              
                $.address.externalChange(function(e) {
                    if (e.value.replace(/^\//, '')) {
                        object = e.value.replace(/^\//, '');
                        loadContent(object);
                    }
                });
            });
        </script>
    </head>
    <body onLoad="loadContent('Home')">
        <div id="container">
            <div id="navi">
                <ul>
                    <li><a class="naviLink" href="#" rel="address:/Home">Home</a></li>
                    <li><a class="naviLink" href="#" rel="address:/Info">Info</a></li>
                    <li><a class="naviLink" href="#" rel="address:/Kontakt">Kontakt</a></li>
                </ul>
            </div>
            <div id="content"></div>
        </div>
    </body>
</html>

Im dem Ordner liegen dann die jeweiligen *.txt Dateien zum Inhalt laden.
Ich hoffe Ihr versteht mein Problem.
Danke vorab.
 
Guten Tag zusammen,

ich habe ein paar Startschwierigkeiten mit Ajax:

Zum Lernen habe ich mir zum einen zwei Buttons erstellt mit denen ich mir Datum und Uhrzeit anzeigen lasse:
Es funktioniert auch wie gewollt, jedoch beim zweiten drücken des Buttons lädt die Seite den schon zuvor geladenen Inhalt. ( Hat das mit meinem Browser zu tun oder hab ich einen Fehler gemacht! )
http://87.106.6.247/entwicklung/ajax/

index.php
HTML:
<!DOCTYPE HTML>
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>Entwicklungsumgebung für jQuery - Ajax</title>
      <style type="text/css">
         .datum_zeit {
            border-widht: 1px;
            border-style: solid;
            border-color: red;
            background-color: yellow;
            display: none;
         }
      </style>
      <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
      <script type="text/javascript">
         function loadFrame(id, value) {
            $.get('./load.php?value='+value, function(data) {
               $('#'+id).fadeIn('slow');
               $('#'+id).html(data);
            })
         }
      </script>
   </head>
   <body>
      <table>
      <tr>
      <td>
         <button onclick="loadFrame('frame1', 'datum')">Datum</button>
      </td>
      <td>
         <div class="datum_zeit" id="frame1"></div>
      </td>
      </tr>
      <tr>
      <td>
         <button onclick="loadFrame('frame2', 'zeit')">Uhrzeit</button>
      </td>
      <td>
         <div class="datum_zeit" id="frame2"></div>
      </td>
      </tr>
      </table>
   </body>
</html>

load.php
PHP:
<?php

$value = $_GET['value'];

switch ($value) {

case "datum":
   $date = date("d.m.Y");
   echo $date;
break;

case "zeit":
   $time = date("H:i:s");
   echo $time;
break;

default:
   echo "FEHLER";
}
?>

-----------------------------------------------------------------------------------------------------------------------------------------------------------

Zum zweiten wollte ich eine Website mit nachladendem Content erstellen:
Gleiche Problem wie oben ( ändere ich in der Textdatei die mittels anfrage Übertragen wird zeigt sich die Änderung auf der Website nicht. )
Ich habe auch das "JQuery Address Plugin" eingebunden jedoch ohne Erfolg!
http://87.106.6.247/eckardts/v1.1/

index.html
HTML:
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Willkommen</title>
        <style type="text/css">
            html, body {
                background-color: #333;
            }
         
            #container {
                width: 900px;
                margin: 0 auto 0 auto;
                padding: 10px;
                background-color: #FFF;
                border: 1px solid #000;
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
            }
         
            #navi {
                border-bottom: 2px solid #333;
            }
         
            #content {
                margin-top: 10px;
                font-family: sans-serif;
                font-size: 16px;
            }
         
            #navi ul {
                list-style: none;
                text-align: center;
            }
         
            #navi ul li {
                display: inline;
                padding-right: 15px;
            }
         
            #navi ul li a {
                font-family: sans-serif;
                font-size: 24px;
                color: #000;
                text-decoration: none;
            }
         
            #navi ul li a:hover {
                border-bottom: 3px solid #000;
            }
        </style>
        <script type="text/javascript" src="jquery-1.11.0.js"></script>
        <script type="text/javascript" src="jquery.address-1.5.min.js"></script>
        <script type="text/javascript">
            var object = null;
            var Objectdata = false;
         
            function loadContent(page) {
                $.get(page+'.txt', function(data) {
                    if (data) {
                        Objectdata = data;
                        $('#content').fadeOut(function() {
                            $('#content').html(Objectdata).fadeIn();
                        });
                        $('title').html(object);
                    } else {
                        $('#content').fadeOut(function() {
                            $('#content').html("Es wurde keine Seite gefunden!").fadeIn();
                        });
                        $('title').html("Error 404");
                    }
                });
            }
         
            $(document).ready(function(e) {
                $('.naviLink').click(function(e) {
                    object = e.currentTarget.innerHTML;
                    Objectdata = false;
                    loadContent(object);
                    e.preventDefault();
                });
             
                $.address.externalChange(function(e) {
                    if (e.value.replace(/^\//, '')) {
                        object = e.value.replace(/^\//, '');
                        loadContent(object);
                    }
                });
            });
        </script>
    </head>
    <body onLoad="loadContent('Home')">
        <div id="container">
            <div id="navi">
                <ul>
                    <li><a class="naviLink" href="#" rel="address:/Home">Home</a></li>
                    <li><a class="naviLink" href="#" rel="address:/Info">Info</a></li>
                    <li><a class="naviLink" href="#" rel="address:/Kontakt">Kontakt</a></li>
                </ul>
            </div>
            <div id="content"></div>
        </div>
    </body>
</html>

Im dem Ordner liegen dann die jeweiligen *.txt Dateien zum Inhalt laden.
Ich hoffe Ihr versteht mein Problem.
Danke vorab.

Hört sich nach einem Problem mit dem Cache an. Fehler im Code finde ich nämlich keinen.
Versuch doch mal hinter den benötigten Parametern das Datum anzuhängen. ZB

Code:
<script>$.get('./load.php?value='+value+'&test='+Date.now());</script>
 
Ich hoffe Ihr versteht mein Problem.

Nö, das ist viel zu chaotisch, um es sich näher anzuschauen.

1. Verwende nicht die Shorthands get() oder post() sondern die low-level Implementierung Ajax. Da kann man einzelne Handler für url, data, success, error, usw. setzen. Das macht es viel übersichtlicher.
2. lädt man keine .txt-Dateien, sondern HTML, XML oder JSON-Objekte.
3. gehört JS separiert von HTML-Code. Also nicht <button onclick=""> sondern $('button').on('click', function() {}).
 
@scbawik:
Habe ich getan und mittels PHP-Script wieder zurückgegeben.
Es ist jetzt ein Stück weiter wie ich mir es Vorgestellt habe.
Beim klicken Zeigt er mir die aktuelle Uhrzeit an, jedoch beim zweiten klick verändert sich nichts.
Was sich zu vorher geändert hat ist das jetzt nach einer Seitenaktualisierung (F5) beim anschließenden klicken die aktuelle Uhrzeit darstellt.


Scheinbar ist es wirklich so das es irgendwo in Cache liegt.
[ERLEDIGT] Hatte die "Date.now()" nicht in der Funktion sondern als Globale variable gesetzt.
@Tronjer:
Ich habe Interesse den Code übersichtlicher zu machen da ich ein Projekt mit jQuery und Ajax realisieren möchte aber dazu muss ich es eben noch lernen :)
Kannst du mir Tutorials oder Lektüren empfehlen?
• Was ist hiermit? http://www.amazon.de/gp/product/3836219794/ref=ox_sc_act_title_1?ie=UTF8&psc=1&smid=A3JWKAKR8XB7XF
Das ist mir klar es ist wirklich nur rein zum lernen um überhaupt einen Inhalt in die Seite zu laden, es soll natürlich im fertigen Projekt mittels PHP eine MySQL Request ausgewertet werden.

Also in der Art wie ich es im 2. Beispiel gemacht habe?
Code:
            $(document).ready(function(e) {
                $('.naviLink').click(function(e) {
                    object = e.currentTarget.innerHTML;
                    Objectdata = false;
                    loadContent(object);
                    e.preventDefault();
                });
            });

Was noch bleibt ist das Problem mit jQuery Address, da bräuche ich noch Hilfe.

Gibt es eine schönere Lösung das Cache Problem zu umgehen?
 
Zuletzt bearbeitet:
@scbawik:
Habe ich getan und mittels PHP-Script wieder zurückgegeben.
Es ist jetzt ein Stück weiter wie ich mir es Vorgestellt habe.
Beim klicken Zeigt er mir die aktuelle Uhrzeit an, jedoch beim zweiten klick verändert sich nichts.
Was sich zu vorher geändert hat ist das jetzt nach einer Seitenaktualisierung (F5) beim anschließenden klicken die aktuelle Uhrzeit darstellt.


Scheinbar ist es wirklich so das es irgendwo in Cache liegt.
[ERLEDIGT] Hatte die "Date.now()" nicht in der Funktion sondern als Globale variable gesetzt.
Gibt es eine schönere Lösung das Cache Problem zu umgehen?

Grundsätzlich gibt es daran nichts auszusetzen. Allerdings habe ich dir das nur geschrieben um das Problem zu ermitteln, nicht um es zu lösen.
Verwende statt $.get $.ajax (wie von Tronjer empfohlen), dort kannst du den Cache deaktivieren:
http://api.jquery.com/jQuery.ajax/

Dieses "deaktivieren" des Caches macht eigentlich genau das selbe nur ist es eben schöner.
 
Was mir noch nicht ganz klar ist, muss ich jetzt alle anfragen die ich an den Server sende als Formular "Tarnen"?
Es ist ja unüblich um zum Beispielsweise um ein neues Event anzuzeigen ein POST-Formular zu senden o_O

Also ich kann jetzt die Schlüsselwörter die ich an mein PHP-Script übergeben möchte einfach mittels $_POST abgreifen, so verstehe ich das..?​
 
Du kannst statt POST auch GET verwenden und musst nicht zwingend Daten versenden und/oder welche zurückliefern lassen. Außerdem ließen sich noch ein beforeSend, dataType, error und andere Handler einbinden.

Das Beispiel sollte nur zeigen, wie Ajax und PHP korrespondieren, und dass $.ajax()leichter lesbar als $.get() ist.
 
Ich habe jetzt meine Dateien umgeschrieben allerdings habe ich den $.ajax request in eine Funktion geschrieben aber der Aufruf klappt nicht finde den Fehler nicht :confused:

[EDIT] Die Page ist jetzt unter: http://87.106.6.247/eckardts/v1.2/

Code:
Übersichtshalber habe ich den Code entfernt!
 
Zuletzt bearbeitet:
Bin ein bisschen weiter gekommen, nachdem ich ein paar Anfängerfehler beseitigt habe :p

Jetzt habe ich zumindest eine Kommunikation zwischen der index.php und der request.php erreicht!
Aber scheinbar übergebe ich das Schlüsselwort welches in der POST-Variable seite steht fehlerhaft oder überhaupt nicht.

Aktueller Code:
Code:
        <script type="text/javascript" src="../v1.1/jquery-1.11.0.js"></script>
        <script type="text/javascript" src="../v1.1/jquery.address-1.5.min.js"></script>
        <script type="text/javascript">
            var seite;
     
            function ladeSeite(seite) {
                $.ajax({
                    url: 'request.php',
                    type: 'POST',
                    data: 'seite='+seite,
                    success: function(result) {
                        $('#content').html(result);
                    }
                });
            }
         
            $(document).ready(function(e) {
                $('.naviLink').click(function(e) {
                    seite = e.currentTarget.innerHTML;
                    ladeSeite(seite);
                    e.preventDefault();
                });
             
                $.address.externalChange(function(e) {
                    if (e.value.replace(/^\//, '')) {
                        object = e.value.replace(/^\//, '');
                        loadContent(object);
                    }
                });
            });
        </script>
    </head>
    <body>
        <div id="container">
            <div id="navi">
                <ul>
                    <li><a class="naviLink" href="#" rel="address:/Home">Home</a></li>
                    <li><a class="naviLink" href="#" rel="address:/Info">Info</a></li>
                    <li><a class="naviLink" href="#" rel="address:/Kontakt">Kontakt</a></li>
                </ul>
            </div>
            <div id="content"></div>
        </div>
    </body>

Code:
<?php

$seite = $_POST['seite'];

switch ($seite) {
 
    case "Home":
        echo "
        <b>Home</b><br />
        <br />
        Willkommen auf der Website =)
        ";
    break;
 
    default:
        echo "
        <b>Fehler</b><br />
        Seite konnte nicht gefunden werden!
        ";
}

?>
[EDIT] Fehler gefunden :D
Hab anhand ein paar Beispiele gesehen wie es sein muss :)
Der Fehler steckte im data: Attribut des ajax requests!


Was leider noch niemand angesprochen hat ist das Problem mit jQuery Address
 
Zuletzt bearbeitet:
$.adress ist ja auch undefined.

Aber was genau willst du eigentlich machen, den Inhalt einer mit dem Hyperlink korrespondierenden Datei in #content laden? Dafür braucht es doch kein Plugin.
 
Ich möchte das die Website über die Browser Steuerelemente bedienbar bleibt und außerdem von außen über Links die einzelnen Seiten erreichen können.

Gibt es da einfachere bzw. bessere Möglichkeiten?
Immer her damit :p
 
Dann ist der Ansatz mit Ajax wahrscheinlich nicht richtig. Denn dabei lädt man nur Teile der Seite neu, ohne die URL zu verändern.

Mal angenommen, du hast zwei Seiten, index.php und kontakt.php. In beiden Seiten steht das selbe, nur der Content ändert sich jeweils. Dann wäre eine solche Struktur denkbar (ungeprüft und nur als Beispiel):

Inhalt von index.php und kontakt.php:
PHP:
require('layout.php');

layout.php:
HTML:
<? require('controller.php'); ?>
<!Doctype html>
..........

Da wo jetzt die Punkte stehen, kommt der gesamte Inhalt rein der in beiden Seiten identisch ist, und dazu ein Div für den variablen Content, also:
(layout.php)
Code:
<div id="content">
<? echo $content; ?>
</div>

In der controller.php zerlegst du dann die URL, so dass index und kontakt heraus gefiltert werden und belegst anhand dessen die Variablen im switch-case.

controller.php:
PHP:
$sub_page = end(explode('/', $_SERVER['REQUEST_URI']));
$sub_page = reset(explode('.', $sub_page));

switch ($sub_page) {
  case 'index':
    $content = 'Das ist die Index Seite';
    break;
  case 'kontakt':
    $content = 'Das ist die Kontakt Seite';
    break;
  default:
    $content = 'Fehler, Seite nicht gefunden';
    break;
};

Die index.php lädt die layout.php. Die layout.php lädt als erstes die controller.php. In der controller.php wird die Content-Variable anhand der URL belegt und an die layout.php zurückgeliefert, welche die Varibale dann in der index.php rendert.
 
Bin irgendwie hin und her gerissen..
Ich hatte mir halt bei der Verwendung mit Ajax eine Benutzerfreundlichere Bedienung erhofft (Ladezeiten, Animationen, usw.)

Möglicherweise Hilft es das du dir mal das eigentliche Projekt ansiehst welches ich komplett neu machen wollte damit es einfach Dynamischer und Schöner wird!
http://www.feuerwehr-emskirchen.de

Sodass eben der Header die Navi-Spalte und die Info-Spalte im wesentlichen nicht geändert/geladen werden müssen sondern nur der Inhalt.​
 
Schönheit ist eine Frage des Designs und nicht der Struktur. :p

Verwende Ajax, wenn du nur Teile einer Seite neu laden willst.
Verwende PHP, wenn du eine neue Seite laden willst.

Redundanzen bei Header, Navi, Footer, etc., lassen sich mit beiden Ansätzen vermeiden.
 
Wahre Schönheit kommt von Innen :D

ja ich werde mal ein bisschen herumprobieren was mir am besten zusagt.
Kannst du mir trotzdem bei dem definieren des $.address Objektes helfen? :)
 
Ich sehe auf Anhieb nicht, warum $.adress an der Stelle undefined ist.

An deiner Stelle würde ich ein Beispiel aus der Doku übernehmen und wenn das funktioniert, auf die gewünschte Funktion umabeun.
 
Zurück
Oben