Sending GET Requests via AJAX in JavaScript

La oss nå lære å sende data til serveren i en AJAX-forespørsel. Serveren vil gjøre noe med disse dataene og sende tilbake resultatet til oss.

Vår testserver vil behandle dataene sendt til adressen /handler/:

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

La oss starte med å sende en GET forespørsel:

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

La oss motta de sendte dataene på serversiden:

server.jsexport default {
  '/handler/': function({get}) {
    console.log(get.num); // vil skrive ut 3
  }
}

La oss gjøre noe med disse dataene og sende dem tilbake:

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

På klientsiden mottar vi resultatet og skriver det ut et sted:

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

På klienten er det gitt en div og en knapp. Ved klikk på knappen send to tall til serveren. La serveren finne summen av de sendte tallene. Resultatet skrives inn i div-en.

Задание 2

La det på serveren være gitt en array. La serveren forvente at et tall sendes som parameter, og returnerer array-elementet som tilsvarer dette tallet. Ved klikk på en knapp send et tall til serveren, og serverens svar skrives ut i et avsnitt.