GET-päringute saatmine läbi AJAXi JavaScriptis

Õpime nüüd andmeid saatma serverile AJAX-päringus. Server teeb midagi nende andmetega ja saadab meile tagasi tulemuse.

Meie testserver töötleb andmeid, mis saadetakse aadressile /handler/:

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

Alustuseks saadame GET päringu:

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

Saame serveri poolel saadetud andmed kätte:

server.jsexport default {
  '/handler/': function({get}) {
    console.log(get.num); // väljastab 3
  }
}

Teeme nende andmetega midagi ja saadame need tagasi:

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

Kliendi poolel saame tulemuse kätte ja väljastame selle kuhugi:

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

Kliendil on antud div ja nupp. Vajutades nuppu, saatke serverile kaks numbrit. Olgu server leiab saadetud numbrite summa. Tulemuse kirjutage div-i.

Задание 2

Olgu serveril antud massiiv. Olgu server ootab, et parameetrina saadetakse number, ja tagastab massiivi elemendi, mis vastab sellele numbrile. Vajutades nuppu, saatke serverile mingi number, ja serveri vastuse väljastage lõiguks.