Ajax? Skądś to znam!

Hej! To już nasz czternasty, wspólny wpis. Odwaliliśmy do tej pory kawał dobrej roboty. Znaleźliśmy miejsce w naszej aplikacji zarówno dla potrzebnych funkcjonalności, jak i „bajerów”. Z reguły przecież użytkownik ocenia najpierw to, co się rusza i zmienia kolory. Nad materiałem do dzisiejszego wpisu poświęciłem dość dużo czasu. Możliwe nawet, że tworzenie tej funkcjonalności zajęło mi do tej pory najwięcej. Tym większa jest satysfakcja z końcowego wyniku 😉 Zapraszam do lektury i odkrycia, czym jest ta tajemnicza funkcja!

Na początek może trochę teorii. Co mówi wam słówko ‚Ajax’? Jedni pomyślą o:

Bardziej sportowym przyjdzie do głowy Ajax Amsterdam. No, prawie dobrze 😉 Dziś jednak chodzi o Asynchronous JavaScript and XML. Jest to technika, która umożliwia korzystanie ze stron internetowych w sposób asynchroniczny, czyli bez potrzeby przeładowania strony po waszym kliknięciu.

Spotkaliście się z tym na pewno wiele razy. Klikając na jakiś przycisk wyskakiwało okienko bez przeładowania, pisząc coś (najprostszy przykład- Google) dostawaliście podpowiedzi „od razu”. Nic nie migało, nie włączało się i wyłączało. Wszystko bez odświeżania. Jest to bardzo wygodne dla użytkownika, bo nie czyszczą mu się informacje na stronie i nie musi czekać pomiędzy kolejnymi przeładowaniami. Dla dewelopera jest za to marzeniem. Przede wszystkim dlatego, że całość informacji zawartych na stronie nie trzeba ładować od razu, nie obciążając tym serwera i skracając czas ładowania się strony.

To wszystko brzmi pięknie. Postanowiłem użyć ajaxa do zwiększania stanu naszego konta. Odświeżanie kilkukrotnie strony, na której są wykresy i statystki byłoby męczące dla użytkownika i serwera. Postaramy się zapomnieć o tych problemach. Na początku jednak wystylizujmy okno dodawania pieniędzy.

Myślę, że warto trzymać się przyjętej konwencji, to znaczy, że władować naszego diva związanego ze stanem konta na białą kartę i na niej również dodać przycisk do zatwierdzania. Zobaczmy, jak to wygląda.

Ekstra 🙂 Teraz tylko margines od góry.

Wygląd mamy, czas na właściwego ajaxa. Najpierw tworzymy EventListenera, który będzie nasłuchiwać, czy wciśnięty został przycisk ‚Add amount’, a następnie piszemy coś takiego:

function increase() {
  $.ajax({
    url : "/statistics/all/ajax/", // the endpoint
    type : "POST", // http method
    data : { the_balance : $('#balance_in').val() }, // data sent with the post request
    success : function(json) {
      $('#balance_in').val('0.00'); // remove the value from the input
      var obj = $.parseJSON(json);
      $('#user-bal').html('Your balance: ' + obj['balance'])
    },
   // handle a asd-successful response
    error : function(xhr,errmsg,err) {
      console.log("Error")
    }
  });
};

A teraz wyjaśnienie poszczególnych pól:

  • url – przekierowanie na daną stronę,
  • type – metoda przesyłania danych, może być POST lub GET,
  • data – dane, w naszym przypadku pobrane z pola do zwiększania stanu konta,
  • success – w przypadku braku błędów,
    • usuwamy z inputa wpisaną przez nas liczbę,
    • modyfikujemy dane (nowy stan konta) do formatu JSON, czyli takiego, którego obsługują wszystkie przeglądarki,
    • podmieniamy nasz aktualny stan konta na nowy,
  • error – jeśli po drodze pojawią się błędy, to chcielibyśmy, żeby zostały wypisane.

W pliku views musimy dodać jeszcze funkcję, która wykona nam właściwe zwiększenie stanu konta i zapisze je do bazy:

def statistics_ajax(request):

    increase_balance = Decimal(request.POST.get('the_balance'))

    p = Profile.objects.get(user=request.user)
    p.balance += increase_balance
    p.save()

    context = {
        'balance': p.balance
    }

    return HttpResponse(json.dumps(context, cls=DjangoJSONEncoder))

Przy użyciu zmiennej ‚increase_balance’ pobieramy aktualny stan konta. Później pobieramy zalogowanego usera i zwiększamy jego środki na koncie. Po wszystkim przesyłamy dane w formacie JSON, który został już wspomniany wyżej 🙂 A teraz dla wszystkich wytrwałych filmik, jak to właściwie się prezentuje.

Przyznacie, że trochę roboty z tym jest, ale efekt uważam za jak najbardziej wart włożonego wysiłku. Dość długo nad tym główkowałem, ale następnym razem będę już przygotowany na ewentualne przeciwności i jak sobie z nimi radzić 😉

To tyle w dzisiejszym, technicznym wpisie. Takie też muszą być. Postaram się, aby następny był trochę ‚lżejszy’. Trzymajcie się, cześć!

Jedna odpowiedź do “Ajax? Skądś to znam!”

  1. Drobne modyfikacje najczęściej zabierają najwięcej czasu :/
    Super pomysł z wykorzystaniem Ajaxa, czekam na kolejne modyfikacje!

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *