Odesílání GET požadavků přes AJAX v JavaScriptu

Nyní se naučme předávat data na server v AJAX požadavku. Server s těmito daty něco provede a pošle nám zpět výsledek.

Náš testovací server bude zpracovávat data odeslaná na adresu /handler/:

public/client.jsbutton.addEventListener('click', function() {
  let promise = fetch('/handler/');
});

Pro začátek pošleme GET požadavek:

public/client.jsbutton.addEventListener('click', function() {
  let promise = fetch('/handler/?num=3');
});

Získejme odeslaná data na straně serveru:

server.jsexport default {
  '/handler/': function({get}) {
    console.log(get.num); // vypíše 3
  }
}

Něco s těmito daty udělejme a pošleme je zpět:

server.jsexport default {
  '/handler/': function({get}) {
    return get.num ** 2;
  }
}

Na straně klienta získáme výsledek a vypíšeme jej někam:

public/client.jsbutton.addEventListener('click', function() {
  fetch('/handler/?num=3').then(
    response => {
      return response.text();
    }
  ).then(
    text => {
      console.log(text);
    }
  );
});
Задание 1

Na klientovi je zadán div a tlačítko. Po stisknutí tlačítka odešlete na server dvě čísla. Nechte server najít součet předaných čísel. Výsledek zapište do divu.

Задание 2

Nechť je na serveru zadáno pole. Nechte server očekávat, že parametrem bude předáno číslo, a vracet prvek pole odpovídající tomuto číslu. Po stisknutí tlačítka předejte na server nějaké číslo a odpověď serveru vypište do odstavce.