Изпращане на GET заявки чрез AJAX в JavaScript

Нека сега се научим да предаваме данни към сървъра в AJAX заявка. Сървърът ще направи нещо с тези данни и ще ни изпрати обратно резултата.

Нашият тестов сървър ще обработва данни, изпратени на адрес /handler/:

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

Като начало нека изпратим GET заявка:

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

Нека получим изпратените данни от страна на сървъра:

server.jsexport default {
  '/handler/': function({get}) {
    console.log(get.num); // ще изведе 3
  }
}

Нека направим нещо с тези данни и ги изпратим обратно:

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

От страна на клиента ще получим резултата и ще го изведем някъде:

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

На клиента е даден div и бутон. При натискане на бутона изпратете към сървъра две числа. Нека сървърът намери сумата на подадените числа. Резултатът запишете в div.

Задание 2

Нека на сървъра е даден масив. Нека сървърът очаква, че като параметър ще бъде подадено число, и връща елемента от масива, съответстващ на това число. При натискане на бутон подайте към сървъра някакво число, а отговора от сървъра изведете в параграф.