Главная страница  /  Занятия  /  #18  /  AJAX-запрос методом POST в jQuery

AJAX-запрос методом POST в jQuery

Задание:

Продемонстрировать, как осуществляется асинхронный AJAX-запрос методом POST в jQuery.

html-документ (index.html):

   <!DOCTYPE html>
   
   <html lang="ru">
   
    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>AJAX-запрос методом POST в jQuery</title>
     <link rel="stylesheet" href="styles.css">
     <script src="/js/jquery-3.6.0.min.js"></script>
     <script src="scripts.js"></script>
    </head>
   
    <body>
     <h1>Текущие новости:</h3>
     <div id="newsContainer"></div>
     <select>
      <option value='1'>Первая новость</option>
      <option value='2'>Вторая новость</option>
      <option value='3'>Третья новость</option>
     </select>
     <button>Загрузить новость</button>
    </body>
   
   </html>

CSS–разметка (styles.css):

   #newsContainer		{ border: 1px solid #d0d0d0; width: 100%; height: 200px; margin-bottom: 26px; }
   select			{ display: block; float: left; width: 180px; height: 30px; box-sizing: border-box; border: 1px solid #e0e0e0; font-family: Arial, Tahoma, Verdana; font-size: 16px; outline: 0; color: #404040; padding: 4px; margin-right: 10px; }
   button			{ display: block; width: 180px; height: 30px; border: 1px solid #d0d0d0; background-color: #f0f0f0; color: #000000; outline: none; }

JS–скрипты (scripts.js):

   $(window).on('load', function()
   {
    $('button').click(function()
    {
     $.post('scripts.php', { id : $('select').val() }, function(data) { $('#newsContainer').html(data); });
    });
   });

PHP–скрипты (scripts.php):

   <?
    switch($_POST['id'])
    {
     case 1:
      echo 'Текст первой новости';
      break;
   
     case 2:
      echo 'Текст второй новости';
      break;
   
     case 3:
      echo 'Текст третьей новости';
      break;
   
     default:
      break;
    }
   ?>

Результат:

Результат выполнения задания можно посмотреть здесь.