Функция перенаправления на html-странице с помощью ajax

Question

Я сегодня посетил эту страницу веб-сайта .Там в верхней части страницы 3 радио ссылки кнопки.Когда я нажимаю на это удивление, там не было функции загрузки окна Эми, и я мгновенно перехожу на вторую страницу, когда хочу щелкнуть переключатель.

Я также просматриваю этот исходный код для кода ajax, но там не было.

Я также хочу создать то же самое на своем веб-сайте, когда пользователь нажимает на любую ссылку, кнопку или ввод, а затем страница никогда не загружает все это с помощью функции connected page.

Пожалуйста, помогите, как я создаю такой код.Пожалуйста, научите меня на примере.

Спасибо заранее.

Answer 1

Эта технология называется " Загрузка содержимого страницы через AJAX ".Вы можете выполнить поиск по этому ключевому слову в Google, чтобы узнать, как оно работает.

А вот и рабочая демонстрация с библиотекой jQuery javascript.Вы можете проверить мой код и комментарий в теге script .(Нажмите «Запустить в редакторе» внутри файла «index.html»)

Ссылка: https://plnkr.co/IMHyUwI4zllOwlCXb6b5

Код:

/* When the DOM ready */
    $(document).ready(function() {
      /* Do */
      /* Load content to div has id = main, from url = 'r1.html' (default state for fisrt visit time)*/
      $('#main').load('r1.html');
      /* Find input with id = r1, bind to click event */
      $('#r1').on('click', function() {
        /* when it get clicked , load content to div has id = main, from url = 'r1.html' */
        $('#main').load('r1.html');
      });
      /* Find input with id = r2, bind to click event */
      $('#r2').on('click', function() {
        /* when it get clicked , load content to div has id = main, from url = 'r2.html' */
        $('#main').load('r2.html');
      });
      /* Find input with id = r3, bind to click event */
      $('#r3').on('click', function() {
        /* when it get clicked , load content to div has id = main, from url = 'r2.html' */
        $('#main').load('r3.html');
      });
    });