Ajax Grundlagen

köttbullar · Sonntag 20. September 2015, 08:57

Hallo,

wie ihr sicherlich schon bemerkt habt, bin ich nicht der Profi im Webprogrammieren.
Allerdings würde ich mir schon gerne die Grundkenntnisse aneignen.
deshalb würde ich gerne von ganz vorne anfangen

mein nächstes Projekt wird es sein
verschiedene Zahlen auf der Weboberfläche anzeigen zu lassen.
und zwar habe ich Bild er die von 1-100 gehen
das erste Bild heißt logischerweiße 1.png
das zweite Bild heißt 2.png
nun würde ich gerne einen Button einen Button programmieren wenn ich auf diesen Klick dann zählt er im Sekundentakt hoch.
auf meiner Weboberfläche sieht das dann wie folgt aus:
Ich drücke den Button 1 Sekunde = 1.png wird angezeigt
ich drücke den Button 2 Sekunden = 2.png wird angezeigt
usw.
dies soll natürlich alles in echtzeit geschehen.
also wenn ich den Button z.B 30 Sekunden drücken, dann will ich dass die Zahlen von 1-30 auf meiner Weboberfläche sichtbar waren
1.png
2.png
3.png
...

Kannn mir jemand sagen wie man sowas umsetzt?

vielen Dank im voraus

Sirius3 · Sonntag 20. September 2015, 09:18

@köttbullar: das wird doch in jedem Buch/Tutorial zu Javascript behandelt (Knopf drücken, Zähler läuft, Knopf drücken, Stop). Welches benutzt Du denn zum Lernen?

köttbullar · Sonntag 20. September 2015, 09:57

das mit dem Zähler ist auch kein Problem.
Das Problem ist wie dies über Ajax anzeigen lassen kann.
damit ich nicht die ganze Seite neu laden muss, sondern nur den Teil der sich ändert

/me · Sonntag 20. September 2015, 10:11

köttbullar hat geschrieben:Das Problem ist wie dies über Ajax anzeigen lassen kann.

Dafür brauchst du kein Ajax. Mit JavaScript kannst du das Aussehen der Seite doch schon beliebig umgestalten. Du könntest in diesem Fall einfach den Verweis auf das Bild austauschen.

köttbullar · Sonntag 20. September 2015, 10:12

und wie funktioniert dann sowas?
kann mir jemand ein Beispiel geben?

Sirius3 · Sonntag 20. September 2015, 12:06

@köttbullar: dann zeig doch mal, was Du bisher versucht hast. Wenn Du Dir Grundkenntnisse aneignen willst, dann tu das. Das Forum ist aber nicht dazu da, Dir diese zu zeigen, dafür gibt es genug andere Quellen.

köttbullar · Sonntag 20. September 2015, 12:40

Das verstehe ich, kannst du mir ein paar gute quellen nennen, bei denen ich nachlesen kann wie Ajax funktioniert.
Am besten mit praktischen beispielen anhand von Django

Code: Alles auswählen

<html>
<body>
<input type="button" min="0" max="100" value="0" step="5" onclick="showValue(this.value)" />
<span id="button">0</span>
<script type="text/javascript">
function showValue(newValue)
{
	document.getElementById("button").innerHTML=newValue;
        
}
</script>
</body>
</html>

Sirius3 · Sonntag 20. September 2015, 12:58

@köttbullar: AJAX macht heutzutage praktisch niemand mehr, es müßte eigentlich AJAJ heißen, oder ganz allgemein asynchrone Datenabfrage mit Javascript. Und da steckt ja auch schon alles drin, was Du wissen mußt. Der Server liefert Daten, wie die abgefragt werden, ist mal egal und damit muß man auf Django-Seite gar nichts machen, außer, dass man statt HTML jetzt JSON zurückliefert. Interessanter ist die Browserseite. Dort setzt Du am besten jQuery ein, das vereinfacht Dir einiges.

BlackJack · Sonntag 20. September 2015, 15:32

Mal das mit dem Mausdrücken → 1 mal pro Sekunde Wert erhöhen bis Wert = 100 oder Maus losgelassen (oder Maus verlässt Schaltfläche) ganz grundsätzlich umgesetzt:

Code: Alles auswählen

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Test</title>
</head>
<body>
  <input type="button" id="button" name="button" value="0">
  
  <script src="jquery-2.1.4.min.js"></script>
  <script type="text/javascript">
    var context = {};

    var increaseCounter = function (context) {
        console.log(context);
        if (context.value < 100) {
          context.value += 1;
          context.element.value = context.value;
        } else {
          clearInterval(context.timerId);
        }
    };

    var startCounter = function (event) {
      var context = event.data;
      context.element = this;
      context.value = parseInt(this.value);
      context.timerId = setInterval(increaseCounter, 1000, context)
      console.log(context);
    };

    var stopCounter = function (event) {
      clearInterval(event.data.timerId);
    };

    $(function () {
        $('#button')
          .mousedown(context, startCounter)
          .mouseup(context, stopCounter)
          .mouseleave(context, stopCounter);
    });
  </script>
</body>
</html>

noisefloor · Samstag 26. September 2015, 12:04

Hallo,

https://de.wikipedia.org/wiki/Ajax_%28Programmierung%29

Und, wie oben schon erwähnt, macht der Einsatz von jQuery das ganze einfacher.

Hast du schon mal in JavaScript programmiert?

Gruß, noisefloor