Seite 1 von 1
Ajax Grundlagen
Verfasst: Sonntag 20. September 2015, 08:57
von köttbullar
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
Re: Ajax Grundlagen
Verfasst: Sonntag 20. September 2015, 09:18
von Sirius3
@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?
Re: Ajax Grundlagen
Verfasst: Sonntag 20. September 2015, 09:57
von köttbullar
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
Re: Ajax Grundlagen
Verfasst: Sonntag 20. September 2015, 10:11
von /me
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.
Re: Ajax Grundlagen
Verfasst: Sonntag 20. September 2015, 10:12
von köttbullar
und wie funktioniert dann sowas?
kann mir jemand ein Beispiel geben?
Re: Ajax Grundlagen
Verfasst: Sonntag 20. September 2015, 12:06
von Sirius3
@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.
Re: Ajax Grundlagen
Verfasst: Sonntag 20. September 2015, 12:40
von köttbullar
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>
Re: Ajax Grundlagen
Verfasst: Sonntag 20. September 2015, 12:58
von Sirius3
@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.
Re: Ajax Grundlagen
Verfasst: Sonntag 20. September 2015, 15:32
von BlackJack
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>
Re: Ajax Grundlagen
Verfasst: Samstag 26. September 2015, 12:04
von noisefloor
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