Jquery.get()

Performing POST Request with AJAX using jQuery

POST requests are identical to GET requests in jQuery. So, generally which method you should use either or is basically depends on the requirements of your server-side code. If you have large amount of data to be transmitted (e.g. form data) you need to use POST, because GET has a stringent limit on the data transfer.

Example

Try this code

Here’s our «display-comment.php» file that simply output the data entered by the user.

Example

Download

Now that you have learnt how to perform various Ajax operations such as loading data, submitting form, etc. asynchronously using jQuery. Before concluding this chapter check out one more classic example of Ajax that will show you how to populate the state or city dropdown based on the option selected in the country dropdown using jQuery.

Related Tutorials

GETTING STARTED

• Learn the basics of web programming.
• How to Run a PHP Script?
• JavaScript Tutorial for Beginners
• Bootstrap Tutorial for Beginners

PHP PROGRAMMING TUTORIALS

• Start something awesome with PHP!
• PHP CRUD Tutorial for Beginners
• PHP OOP CRUD Tutorial
• PHP Login Script with Session
• PHP Shopping Cart Tutorial
• PHP Shopping Cart Tutorial 2.0

REST API TUTORIALS

• Welcome to the new world of web development!
• PHP REST API Tutorial
• PHP REST API Authentication Example
• AJAX CRUD Tutorial

PHP WEB APP SOURCE CODES

• Scripts that will help you build a web app.
• PHP SHOPPING CART SYSTEM
• Download By Modules:
• PHP Login & Registration Module
• PHP Shopping Cart Module
• PHP Product Catalog Module
• PHP Content Management Module
• PHP Contact Form Module
• PHP PayPal Integration Module

MORE SCRIPTS

• More code examples that can be useful for you!
• Shopping Cart Tutorial using COOKIES
• Extra Tutorials

Thank you for learning our post about jQuery AJAX Post Example with PHP and JSON!

RELATED TUTORIAL: PHP, MySQL and AJAX CRUD Tutorial – Step by Step Guide!

Метод jQuery $. Get ()

Метод $. Get () запрашивает данные с сервера с помощью запроса HTTP GET.

Syntax:

$.get(URL,callback);

Обязательный параметр URL-адреса указывает URL-адрес, который требуется запросить.

Необязательный параметр обратного вызова — это имя функции, которая должна быть выполнена, если запрос выполнен успешно.

В следующем примере используется метод $. Get () для извлечения данных из файла на сервере:

Пример

$(«button»).click(function(){
    $.get(«demo_test.php», function(data, status){
        alert(«Data: » + data + «\nStatus: » + status);
    });
});

Первым параметром $. Get () является URL-адрес, который мы хотим запросить («демо_тест. php»).

Вторым параметром является функция обратного вызова. Первый параметр callback содержит содержимое запрашиваемой страницы, а второй параметр обратного вызова — состояние запроса.

Совет: Вот как выглядит файл ASP («демо_тест.php»):

<%
response.write(«This is some text from an external ASP file.»)
%>

Рассмотрим примеры AJAX запросов:

XMLHttpRequest, — экземпляр данного класса включает в себя набор методов для работы в протоколах HTTP и HTTPS. AJAX запрос, — это комплекс выполняемых задач, в режиме «запрос-ответ».

Каждый запрос к серверу, включает в себя ->

• Указание метода HTTP (GET POST)
• Запрашиваемого URL (пути до файла на сервере, который будет обрабатывать наш запрос)
• Установка заголовков на пример: «application/x-www-form-url» или «application/x-www-form-urlencoded» или «application/json» или «text-plain»
• Данные передаваемые на сервер (тело запроса)

Каждый ответ от сервера включает в себя <-

• Код статуса (успешно или нет отработала сторона сервера)
• Заголовки HTTP/HTTPS
• Данные передаваемые от сервера к клиенту (браузеру)

jQuery $.post() Method

The method requests data from the server using an HTTP POST request.

Syntax:

$.post(URL,data,callback);

The required URL parameter specifies the URL you wish to request.

The optional data parameter specifies some data to send along with the
request.

The optional callback parameter is the name of a function to be executed
if the request succeeds.

The following example uses the method to send some data along with the
request:

Example

$(«button»).click(function(){
  $.post(«demo_test_post.asp»,
  {
    name: «Donald Duck»,
    city: «Duckburg»
  },
  function(data, status){
    alert(«Data: » + data + «\nStatus: » + status);
  });
});

The first parameter of is the URL we wish to request («demo_test_post.asp»).

Then we pass in some data to send along with the request (name and city).

The ASP script in «demo_test_post.asp» reads the parameters,
processes them, and returns a result.

The third
parameter is a callback function. The first callback parameter holds the content of
the page requested, and the second callback parameter holds the status of
the request.

Tip: Here is how the ASP file looks like («demo_test_post.asp»):

<%
dim fname,city
fname=Request.Form(«name»)
city=Request.Form(«city»)
Response.Write(«Dear » & fname & «. «)
Response.Write(«Hope you live well in » & city & «.»)
%>

4. PHP

Create file to handle AJAX request.

For example purpose, I am handling both GET and POST requests in a single file.

Assigned 2 to .

GET request (fetch records)

Check if is set or not if set then assign to .

If then fetch all records from table and assign in . Loop on the fetched records.

Return Array in JSON format.

POST request (insert record)

If then read POST values using .

Assing values to variables and prepare INSERT query.

If the INSERT query executed successfully then return otherwise .

Completed Code

<?php

include "config.php";

$request = 2;

// Read $_GET value
if(isset($_GET)){
   $request = $_GET;
}

// Fetch records 
if($request == 1){

   // Select record 
   $sql = "SELECT * FROM employee";
   $employeeData = mysqli_query($con,$sql);

   $response = array();
   while($row = mysqli_fetch_assoc($employeeData)){
      $response[] = array(
         "id" => $row,
         "emp_name" => $row,
         "salary" => $row,
         "email" => $row,
      );
   }

   echo json_encode($response);
   exit;
}

// Insert record
if($request == 2){

   // Read POST data
   $data = json_decode(file_get_contents("php://input"));

   $name = $data->name;
   $salary = $data->salary;
   $email = $data->email;

   // Insert record
   $sql = "insert into employee(emp_name,salary,email) values('".$name."',".$salary.",'".$email."')";
   if(mysqli_query($con,$sql)){
      echo 1; 
   }else{
      echo 0;
   }

   exit;
}

Performing GET Request with AJAX using jQuery

The following example uses the jQuery method to make an Ajax request to the «date-time.php» file using HTTP GET method. It simply retrieves the date and time returned from the server and displays it in the browser without refreshing the page.

Try this code

Here’s our «date-time.php» file that simply output the current date and time of the server.

Tip: If you face any difficulty while running these examples locally on your PC, please check out the tutorial on jQuery Ajax load for the solution.

You can also send some data to the server with the request. In the following example the jQuery code makes an Ajax request to the «create-table.php» as well as sends some additional data to the server along with the request.

Try this code

Here’s the PHP script of our «create-table.php» file that simply output the multiplication table for the number entered by the user on button click.

JS Учебник

JS ГлавнаяJS ВведениеJS Что? Где? Куда?JS ВыводJS ЗаявленияJS СинтаксисJS КомментарииJS ПеременныеJS ОператорыJS АрифметикаJS ПрисваиванияJS Типы данныхJS ФункцииJS ОбъектыJS СобытияJS СтрокиJS Методы строкJS ЧислаJS Методы чиселJS МассивыJS Методы массиваJS Сортировка массиваJS Итерация массиваJS Объекты датJS Формат датJS Метод получения датJS Метод набора датJS Математические…JS Случайные числаJS БулевыJS Сравнение…JS Заявления if…elseJS Заявление switchJS Цикл forJS Цикл whileJS Заявление break…JS Преобразование…JS Битовые…JS Регулярные выраженияJS ОшибкиJS ОбластьJS ПодъемныйJS СтрогийJS Ключевое слово thisJS Ключевое слово letJS КонстантыJS Функция стрелкиJS КлассыJS ОтладчикJS Руководство стиляJS ПрактикаJS Распространенные ошибкиJS ЭффективностьJS Зарезервированные словаJS ВерсииJS Версия ES5JS Версия ES6JS Версия 2016JS Версия 2017JS JSON

Настройка базовых параметров Ajax-запросов

Существует группа параметров, с помощью которых можно выполнить базовую настройку Ajax-запроса (некоторые из них, url и type, мы рассмотрели выше). Из всех доступных параметров они представляют наименьший интерес, и их имена в основном говорят сами за себя. Параметры, о которых идет речь, приведены в таблице ниже:

Базовые конфигурационные параметры Ajax-запроса

Параметр	Описание
accepts	Устанавливает для запроса значение заголовка Accept, который указывает MIME-типы, поддерживаемые браузером. По умолчанию это значение определяется параметром dataType
cache	Значение false указывает на то, что содержимое запроса не должно кэшироваться сервером. По умолчанию кешируются все типы данных, кроме script и jsonp
contentType	Устанавливает для запроса значение заголовка content-туре
dataType	Указывает, какие типы данных ожидаются от сервера. Если используется этот параметр, то jQuery будет игнорировать информацию, предоставляемую сервером о типе запроса
headers	Задает дополнительные заголовки и значения, которые должны включаться в запрос
jsonp	Задает строку, которую следует использовать вместо функции обратного вызова при выполнении запросов JSONP (кроссдоменные запросы). Этот параметр требует согласования с сервером
jsonpCallback	Задает имя функции обратного вызова, которое должно использоваться вместо автоматически сгенерированного случайного имени, используемого jQuery по умолчанию
password	Задает пароль, который должен использоваться в запросе при прохождении процедуры аутентификации
scriptCharset	Указывает jQuery, какой набор символов используется при кодировании запрашиваемого JavaScript-содержимого
timeout	Задает длительность тайм-аута (в миллисекундах) для запроса
userName	Задает имя пользователя, которое должно использоваться в запросе при прохождении процедуры аутентификации

Задание тайм-аутов и заголовков

О том, что выполняются Ajax-запросы, пользователи часто даже не догадываются, и поэтому указание допустимой длительности тайм-аута — неплохая идея, поскольку это избавит пользователей от томительного ожидания завершения какого-то неведомого для них процесса. Пример задания тайм-аута для запроса приведен ниже:

В этом примере параметр timeout устанавливает максимальную длительность тайм-аута, равную 5 сек. Если запрос за это время не будет выполнен, то вызовется функция, заданная с помощью параметра error, и будет выведен код ошибки, определяемый параметром status.

Таймер запускается сразу же после передачи запроса браузеру, и большинство браузеров налагают ограничения на количество одновременно выполняющихся запросов. Это означает, что существует риск того, что к моменту истечения тайм-аута запрос даже не будет запущен. Чтобы избежать этого, необходимо располагать сведениями об ограничениях браузера, а также об объеме и ожидаемой длительности любых других выполняющихся Ajax-запросов.

Дополнительно в этом примере ниже используется параметр headers, с помощью которого в запрос добавляется заголовок. Для указания заголовков используется объект отображения данных. Используемый здесь заголовок может быть полезным для создания веб-приложений, поддерживающих архитектурный стиль REST, если только сервер правильно его распознает.

Элементы кода, которые будут использованы в примерах.

XMLHttpRequest, — это класс, для работы AJAX.

request – это переменная или константа в которой будет хранится, — экземпляр класса XMLHttpRequest, объект с набором методов.

url – это путь до файла на сервере, который будет обрабатывать наш запрос. В примерах с GET методом, в нем будут передаваться данные со стороны клиента.

.open() – это метод где мы задаем, первым параметром, — метод передачи данных, а вторым url.

.setRequestHeader() – это метод для указания передаваемых заголовков, здесь мы можем указать что данные идут в url либо закрытым способом, либо хотим получить данные от сервера в json формате.

.send() – это последний этап создания http запроса. С помощью него также можно передать тело запроса т.е. данные от браузера к серверу. Можно не чего не передавать или прямо указать null.

onreadystatechange – это событие, которое случится, когда нам придет ответ от сервера.

readyState – это метод экземпляра, который сообщает статус HTTP-запроса, вот возможные значения, которые он может дать:

Значение	Описание
Метод open() не вызван
1	Метод open() вызван
2	Получены заголовки ответа
3	Получено тело ответа
4	Передача ответа выполнена

status или statusText – возвращают статус http заголовков, нам нужен ответ 200. Хотя бывают и 404 или 500.

.responseText – данные, которые придут от сервера в виде строки.

.response – данные вернуться в json формате, тут как бы мы преобразуем сразу в объект, и дальше работаем уже как с объектом.

.text() – используется в запросе fetch, возвращает строку.

.json() – используется в запросе fetch, возвращает json обращенный в объект.

Создание асинхронного AJAX запроса (метод POST)

Изменим вышеприведённый пример. Теперь AJAX запрос к серверу будет выполняться после нажатию на кнопку. Он будет
получать имя, которое ввёл пользователь в элемент и отправлять его посредством метода POST на
сервер. После получения ответа с сервера, заменим им содержимое элемента на странице.

HTML:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Пример работы AJAX</title>
</head>
<body>
  <h1>Пример работы AJAX</h1>

  <div id="welcome">
    <label for="name">Имя:</label>
    <input type="text" id="name" placeholder="Например, Иван">
    <button id="send">Отправить</button>
  </div>

<script>
//после загрузки DOM-дерева страницы
document.addEventListener("DOMContentLoaded",function() {
  //получить кнопку
  var mybutton = document.getElementById('send');
  //подписаться на событие click по кнопке и назначить обработчик, который будет выполнять действия, указанные в безымянной функции
  mybutton.addEventListener("click", function(){
    //1. Сбор данных, необходимых для выполнения запроса на сервере
    var name = document.getElementById('name').value;
    //Подготовка данных для отправки на сервер
    //т.е. кодирование с помощью метода encodeURIComponent
    name = 'nameUser=' + encodeURIComponent(name);
    // 2. Создание переменной request
    var request = new XMLHttpRequest();
    // 3. Настройка запроса
    request.open('POST','processing.php',true);
    // 4. Подписка на событие onreadystatechange и обработка его с помощью анонимной функции
    request.addEventListener('readystatechange', function() {
      //если запрос пришёл и статус запроса 200 (OK)
      if ((request.readyState==4) && (request.status==200)) {
        // например, выведем объект XHR в консоль браузера
        console.log(request);
        // и ответ (текст), пришедший с сервера в окне alert
        console.log(request.responseText);
        // получить элемент c id = welcome
        var welcome = document.getElementById('welcome');
        // заменить содержимое элемента ответом, пришедшим с сервера
        welcome.innerHTML = request.responseText;
      }
    });
    // Устанавливаем заголовок Content-Type(обязательно для метода POST). Он предназначен для указания кодировки, с помощью которой зашифрован запрос. Это необходимо для того, чтобы сервер знал как его раскодировать.
    request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    // 5. Отправка запроса на сервер. В качестве параметра указываем данные, которые необходимо передать (необходимо для POST)
    request.send(name);
  });
});
</script>

</body>
</html>

PHP:

<?php
// создадим переменную для формирования ответа
$output ='';
// если в массиве пост есть ключ nameUser, то
if (isset($_POST)) {
  // в переменную name помещаем переданное с помощью запроса имя
  $name = $_POST;
  // добавляем в переменную output строку приветствия с именем
  $output .= 'Здравствуйте, '.$name.'! ';
  // добавляем в переменную output IP-адрес пользователя
  if ($_SERVER) {
    $output .= 'Ваш IP адрес: '. $_SERVER;
  }
  else {
   $output .= 'Ваш IP адрес неизвестен.';
  }
  // выводим ответ
  echo $output;
}

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования jQuery функции $.get()</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( "form" ).submit(function(){
	    event.preventDefault(); // отменяем действие события по умолчанию
	    var formData = $( this ).serialize(); // создаем переменную, которая содержит закодированный набор элементов формы в виде строки

	    $.get( "user2.php", formData, function( data ) { //  передаем и загружаем данные с сервера с помощью HTTP запроса методом GET
	      $( "div" ).html( data ); // вставляем в элемент <div> данные, полученные от сервера
	    })
	  });
	});
		</script>
	</head>
	<body>
		<form> <!-- метод GET по умолчанию -->
			<input type = "text" placeholder = "Имя" name = "firstName" required> <!-- поле обязательно к заполнению -->
			<input type = "text" placeholder = "Фамилия" name = "lastName" required> <!-- поле обязательно к заполнению -->
			<input type = "submit" value = "Добавить">
		</form>
		<div></div>
	</body>
</html>

В этом примере мы привязываем JavaScript обработчик событий «submit» (обработчик отправки формы), который срабатывает в момент отправки (в нашем случае заполненной) формы при нажатии на элемент <input> с типом submit (кнопка для отправки формы).
При отправке формы мы вызываем JavaScript метод event.preventDefault(), который позволяет нам отменить действие события по умолчанию и избежать перезагрузки страницы и передачи собранной информации как часть URL (url?firstName=значение&lastName=значение).

Кроме того, мы создаем переменную, которая содержит закодированный набор элементов формы в виде строки — результат выполнения метода .serialize().
После этого с использованием jQuery функции $.get() выполняем асинхронный AJAX запрос со следующими параметрами:

url — файл, к которому мы обращаемся («user2.php»), он содержит следующий PHP код:

<?php $firstName = $_GET; // создаем переменную firstName, которая содержит переданные скрипту через HTTP метод GET данные (с ключом firstName)
$lastName = $_GET; // создаем переменную lastName, которая содержит переданные скрипту через HTTP метод GET данные (с ключом lastName)
echo «Пользователь «.$firstName.» «.$lastName.» добавлен»; // выводим текстовое содержимое (значение выше созданных переменных)
?>

data — данные, которые будут отправлены на сервер (значение переменной formData).

success — функция обратного вызова, которая вызывается если AJAX запрос выполнится успешно

Обратите внимание, что один из параметров функции (data) содержит данные возвращенные с сервера, которые мы и вставляем в элемент с помощью метода .html().

Результат нашего примера:

Пример использования jQuery функции $.get()

В следующем примере мы рассмотрим как с помощью jQuery функции $.get() загрузить JSON файл и выведем из него некоторую информацию:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования функции $.get (загрузка JSON файла)</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	    $.get( "test.json", function( data ) { //  загружаем данные с сервера с помощью HTTP запроса методом GET
	      $( "div" ).html( data.firstName + " " + data.age ); // вставляем в элемент <div> данные, полученные от сервера
	    })
	  });
	});
		</script>
	</head>
	<body>
		<div></div>
	</body>
</html>

В этом примере при загрузке документа мы с использованием jQuery функции $.get() выполняем асинхронный AJAX запрос со следующими параметрами:

url — файл, к которому мы обращаемся («test.json»), он имеет следующее содержимое:

{
«firstName»: «Борис»,
«lastName»: «Бритва»,
«age»: 25,
«phone»: 88005553535
}

success — функция обратного вызова, которая вызывается если AJAX запрос выполнится успешно

Обратите внимание, что один из параметров функции (data) содержит данные возвращенные с сервера (JSON файл), которые мы частично вставляем в элемент с помощью метода .html().

Результат нашего примера:

Пример использования функции $.get (загрузка JSON файла)jQuery AJAX

Синхронные и асинхронные запросы

Если в методе open установить параметр async равным false , то запрос будет синхронным.

Синхронные вызовы используются чрезвычайно редко, так как блокируют взаимодействие со страницей до окончания загрузки. Посетитель не может даже прокручивать её. Никакой JavaScript не может быть выполнен, пока синхронный вызов не завершён – в общем, в точности те же ограничения как alert .

Если синхронный вызов занял слишком много времени, то браузер предложит закрыть «зависшую» страницу.

Из-за такой блокировки получается, что нельзя отослать два запроса одновременно. Кроме того, забегая вперёд, заметим, что ряд продвинутых возможностей, таких как возможность делать запросы на другой домен и указывать таймаут, в синхронном режиме не работают.

Из всего вышесказанного уже должно быть понятно, что синхронные запросы используются чрезвычайно редко, а асинхронные – почти всегда.

Для того, чтобы запрос стал асинхронным, укажем параметр async равным true .

Если в open указан третий аргумент true (или если третьего аргумента нет), то запрос выполняется асинхронно. Это означает, что после вызова xhr.send() в строке (1) код не «зависает», а преспокойно продолжает выполняться, выполняется строка (2) , а результат приходит через событие (3) , мы изучим его чуть позже.

Полный пример в действии:

Событие readystatechange происходит несколько раз в процессе отсылки и получения ответа. При этом можно посмотреть «текущее состояние запроса» в свойстве xhr.readyState .

В примере выше мы использовали только состояние 4 (запрос завершён), но есть и другие.

Запрос проходит их в порядке 0 → 1 → 2 → 3 → … → 3 → 4 , состояние 3 повторяется при каждом получении очередного пакета данных по сети.

Пример ниже демонстрирует переключение между состояниями. В нём сервер отвечает на запрос digits , пересылая по строке из 1000 цифр раз в секунду.

При состоянии readyState=3 (получен очередной пакет) мы можем посмотреть текущие данные в responseText и, казалось бы, могли бы работать с этими данными как с «ответом на текущий момент».

Однако, технически мы не управляем разрывами между сетевыми пакетами. Если протестировать пример выше в локальной сети, то в большинстве браузеров разрывы будут каждые 1000 символов, но в реальности пакет может прерваться на любом байте.

Чем это опасно? Хотя бы тем, что символы русского языка в кодировке UTF-8 кодируются двумя байтами каждый – и разрыв может возникнуть между ними.

Получится, что при очередном readyState в конце responseText будет байт-полсимвола, то есть он не будет корректной строкой – частью ответа! Если в скрипте как-то по-особому это не обработать, то неизбежны проблемы.

Опции $.ajax

А теперь, попрактиковавшись немного, расскажу теор.часть — про опции JQuery Ajax

• async (true или false). По умолчанию true. Включает или
  выключает асинхронные запросы (см. компонент xmlHttpRequest). Помните,
  что включив синхронные запросы, можете подвесить браузер!
• cache (true или false). Включает или выключает кеширование браузером
• contentType (строка). Тип содержания, передаваемого на сервер. При сабмите форм используйте application/x-www-form-urlencoded
• data (строка). Данные, отправляемые на сервер.
• dataType (строка). Тип ожидаемых от сервера данных. Если
  ничего не указано, JQuery попытается определить результат, основанный на
  MIME-типе ответа. Может принимать значения: xml, json, script, html.
• ifModified (true или false (по умолчанию)). Если установлено в
  true, то запрос будет успешным только тогда, когда ответ изменился с
  момента прошлого запроса (достигается путём проверки заголовка
  Last-Modified)
• timeout (в милисекундах). Значение, по прошествии которого, соединение с сервером будет обрываться (таймаут)
• type (строка: GET или POST). Тип запроса к серверу: GET или POST
• url (строка). Страница сервера, к которой будет сделан запрос.

Вот мы и разобрались с Ajax на JQuery. Ождайте следующую статью — в ней будет рассмотрено что-то вкусненькое на JQuery 😉

Использование вспомогательных методов для работы с конкретными типами данных

Библиотека jQuery предоставляет три вспомогательных метода, которые делают работу с некоторыми типами данных более удобной. Некоторые из них мы рассмотрим далее.

Получение HTML-фрагментов

Метод load() предназначен для получения только HTML-данных, что позволяет совместить запрос HTML-фрагмента, обработку ответа от сервера для создания набора элементов и вставку этих элементов в документ в одном действии. Пример использования метода load() представлен ниже:

В этом сценарии мы вызываем метод load() для элемента, в который хотим вставить новые элементы, и передаем ему URL-адрес в качестве аргумента. Если запрос завершается успешно, а полученный от сервера ответ содержит действительный HTML-фрагмент, элементы вставляются в указанное место в документе, как показано на рисунке:

Вы видите, что все элементы из файла flowers.html добавлены в документ, как мы и хотели, но поскольку у них отсутствует атрибут class, то они не укладываются в табличную компоновку страницы, используемую в основном документе. Поэтому метод load() наиболее полезен в тех случаях, когда все элементы могут быть вставлены в одно место в документе без какой-либо дополнительной обработки.

Получение и выполнение сценариев

Метод getScript() загружает файл JavaScript, а затем выполняет содержащиеся в нем инструкции. Чтобы продемонстрировать работу этого метода, я создал файл myscript.js и сохранил его вместе с файлом test.html на своем веб-сервере. Содержимое этого файла представлено в примере ниже:

Эти инструкции генерируют три ряда элементов, описывающих цветы. Мы обошлись здесь без определения шаблонов и использовали циклы для генерации элементов (хотя, вообще говоря, следовало бы воспользоваться шаблонами данных).

Самое важное, что необходимо знать при работе со сценариям, — между инициализацией Ajax-запроса и выполнением инструкций сценария состояние документа может измениться. В примере ниже приведен сценарий из основного документа, в котором по-прежнему используется метод getScript(), но при этом, еще до завершения Ajax-запроса, модифицируется дерево DOM:. Здесь мы вызываем метод getScript() для основной функции $() и передаем ему в качестве аргумента URL-адрес файла, который хотим использовать

Если сервер способен предоставить указанный файл и этот файл содержит действительный JavaScript-код, то последний будет выполнен

Здесь мы вызываем метод getScript() для основной функции $() и передаем ему в качестве аргумента URL-адрес файла, который хотим использовать. Если сервер способен предоставить указанный файл и этот файл содержит действительный JavaScript-код, то последний будет выполнен.

Метод getScript() можно использовать для загрузки любых сценариев, но особенно полезно использовать его для загрузки и выполнения таких сценариев, как сценарии для отслеживания статистики посещения сайтов или определения географического местоположения клиента, которые не связаны с поддержкой основной функциональности веб-приложения. Пользователя не особенно заботит, в состоянии ли мы точно определять его местоположение для ведения статистики, тогда как длительное ожидание загрузки и выполнения сценария будет действовать ему на нервы.

Используя метод getScript(), можно быстро получать запрашиваемую информацию, не доставляя пользователям неудобств, вызванных необходимостью ожидания ответа. Уточню свою мысль. Я вовсе не предлагаю вам использовать этот метод для выполнения каких-либо действий скрытно от пользователя и говорю лишь о том, что следует отодвигать на второй план загрузку и выполнение вполне законной функциональности, если она представляет для пользователей меньшую ценность, чем затрачиваемое на ее ожидание время.

В данном примере после запуска Ajax-запроса с помощью метода getScript() из документа удаляется элемент row2, для чего используется метод remove(). Данный элемент используется в файле myscript.js для вставки новых элементов. Эти элементы отбрасываются незаметным для пользователя образом, поскольку в документе селектору #row2 ничто не соответствует. Итоговый результат представлен на рисунке:

Отнеситесь к этому примеру как к одному из образцов надежного дизайна для ситуаций, в которых документ подвергается изменениям. Во всяком случае запомните, что при написании внешних сценариев JavaScript не стоит делать слишком много допущений о состоянии документа.

Получение данных в формате JSON

Для загрузки данных JSON с сервера предназначен метод getJSON(). Возможно, это наименее полезный из всех трех вспомогательных методов, поскольку он не делает с данными ничего сверх того, что делает базовый метод get().

jQuery post form data using .ajax() method

This is a great way to show someone that you are now an AJAX programmer. Because of this .ajax() piece of code in your HTML page, you may now face the world with confidence and with a beautiful smile in your face.

Just kidding. But seriously, this piece of code is useful.

<html>
    <head>
        <title>jQuery post form data using .ajax() method by codeofaninja.com</title>
        
    </head>
<body>

<h1>jQuery post form data using .ajax() method</h1>
<div>Fill out and submit the form below to get response.</div>

<!-- our form -->   
<form id='userForm'>
    <div><input type='text' name='firstname' placeholder='Firstname' /></div>
    <div><input type='text' name='lastname' placeholder='Lastname' /></div>
    <div><input type='text' name='email' placeholder='Email' /></div>
    <div><input type='submit' value='Submit' /></div>
</form>

<!-- where the response will be displayed -->
<div id='response'></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>
<script>
$(document).ready(function(){
    $('#userForm').submit(function(){
    
        // show that something is loading
        $('#response').html("<b>Loading response...</b>");
        
        /*
         * 'post_receiver.php' - where you will pass the form data
         * $(this).serialize() - to easily read form data
         * function(data){... - data contains the response from post_receiver.php
         */
        $.ajax({
            type: 'POST',
            url: 'post_receiver.php', 
            data: $(this).serialize()
        })
        .done(function(data){
            
            // show the response
            $('#response').html(data);
            
        })
        .fail(function() {
        
            // just in case posting your form failed
            alert( "Posting failed." );
            
        });

        // to prevent refreshing the whole page page
        return false;

    });
});
</script>

</body>
</html>