JQUERY. Метод $.post(), пример использования

Метод $.post в jQuery. Синтаксис, параметры и пример работы метода.

JQUERY. Метод $.post(), пример использования
Advego - наполнение сайтов информацией
Advego - наполнение сайтов информацией
Advego - наполнение сайтов информацией

Партнерская программа 40%!

Метод jQuery.post( url, [data], [callback], [type] ) загружает страницу с помощью HTTP-запроса POST.
 
Метод возвращает объект XMLHttpRequest.

Синтаксис

Простой синтаксис для использования этого метода —
 
$.post( URL, [data], [callback], [type])

Параметры

Описание всех параметров, используемых этим методом
 
  • URL-адрес — строка, содержащая URL-адрес, на который отправляется запрос.
  • data (данные) — этот необязательный параметр представляет пары ключ / значение или возвращаемое значение функции .serialize (), которое будет отправлено на сервер. 
  • callback (возвращаемое значение) — этот необязательный параметр представляет функцию, которая будет выполняться всякий раз, когда данные успешно загружены.
  • type (тип) — этот необязательный параметр представляет тип данных, которые должны быть возвращены в функцию обратного вызова: «xml», «html», «script», «json», «jsonp» или «text».

Пример


Предположим, что у нас есть следующий код в файле result.php —

<?php
if( $_REQUEST["name"] ) {

   $name = $_REQUEST['name'];
   echo "Привет, ". $name;
}

?>


Используем jquery, чтобы передать имя в result.php со сторонней страницы

<html>
   <head>
      <title>Пример</title>
      <script type = "text/javascript" 
         src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
			
            $("#button-id").click(function(event){
				
               $.post( 
                  "result.php",
                  { name: "Пользователь" },
                  function(data) {
                     $('#text-id').html(data);
                  }
               );
					
            });
				
         });
      </script>
   </head>
	
   <body>
      <p>Нажми на кнопку, чтобы увидеть результат! </p>
		
      <div id = "text-id" style = "background-color:cc0;">
         Какой-то текст...
      </div>
		
      <input type = "button" id = "button-id" value = "Клик" />
   </body>
</html>


Advego - система покупки и продажи контента для сайтов, форумов и блогов
Advego - система покупки и продажи контента для сайтов, форумов и блогов
Advego - система покупки и продажи контента для сайтов, форумов и блогов