5 примеров использования jquery для ajax

Содержание:

Создание асинхронного AJAX запроса (метод GET)
Отправка изображения или файла ajax-запросом через jQuery
Отправка формы со всеми данными ajax-запросом через jQuery
Пример использования
2 AJAX POST Example, the jQuery way
- 2.1 Server side code for our AJAX form
Udemy
Включаем кэширование для AJAX запросов
Получение json-данных с помощью getJSON
Значения параметров
jQuery $.get() Method
- Example
AJAX во внешней части WordPress
- Переменная ajaxurl
  - Пример AJAX кода для фронт энда

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

Рассмотрим создание асинхронного AJAX запроса на примере, который будет после загрузки страницы приветствовать
пользователя и отображать его IP-адрес.

Для этого необходимо создать на сервере 2 файла в одном каталоге:

– HTML-страница, которая будет отображаться пользователю. В этой же страницы поместим
скрипт, который будет осуществлять все необходимые действия для работы AJAX на стороне клиента.
– PHP-файл, который будет обрабатывать запрос на стороне сервера, и формировать ответ.
Начнём разработку с создания основной структуры файла

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Пример работы AJAX</title>
</head>
<body>
  <h1>Пример работы AJAX</h1>
  <div id="welcome"></div>
  <script>
  // Здесь поместим код JavaScript, который будет отправлять запрос на сервер, получать его и обновлять содержимое страницы. Всё это будет работать без перезагрузки страницы

</script>
</body>
</html>

Рассмотрим последовательность действий, которые необходимо выполнить на стороне клиента (в коде JavaScript):

Подготовим данные, необходимые для выполнения запроса на сервере. Если для выполнения запроса на сервере данные
никакие не нужны, то данный этап можно пропустить.
Создадим переменную, которая будет содержать экземпляр объекта XHR (XMLHttpRequest).
Настроим запрос с помощью метода .

Указываются следующие параметры:
- Метод, с помощью которого будет посылаться запрос на сервер (GET, POST).
- URL-адрес, который будет обрабатывать запрос на сервере.
- Тип запроса: синхронный (false) или асинхронный (true).
- Имя и пароль при необходимости.
Подпишемся на событие объекта XHR и укажем обработчик в виде анонимной или
именованной функции. После этого создадим код внутри этой функции, который будет проверять состояние ответа, и
выполнять определённые действия на странице. Ответ, который приходит с сервера, всегда находится в свойстве
.

Дополнительно с проверкой значения свойства числу 4, можно проверять и значение свойства
. Данное свойство определяет статус запроса. Если оно равно 200, то всё . А
иначе произошла ошибка (например, 404 – URL не найден).
Отправим запрос на сервер с помощью метода .

Если используем для отправки запроса метод GET, то передавать данные в параметр данного метода не надо. Они
передаются в составе URL.

Если используем для отправки запроса метод POST, то данные необходимо передать в качестве параметра методу
. Кроме этого, перед вызовом данного метода необходимо установить заголовок Content-Type, чтобы
сервер знал в какой кодировке пришёл к нему запрос и смог его расшифровать.

Содержимое элемента :

// 2. Создание переменной request
var request = new XMLHttpRequest();
// 3. Настройка запроса
request.open('GET','processing.php',true);
// 4. Подписка на событие onreadystatechange и обработка его с помощью анонимной функции
request.addEventListener('readystatechange', function() {
  // если состояния запроса 4 и статус запроса 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;
  }
}); 
// 5. Отправка запроса на сервер
request.send();

В итоге файл будет иметь следующий код:

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

  <div id="welcome"></div>

<script>
window.addEventListener("load",function() {
  var request = new XMLHttpRequest();
  request.open('GET','processing.php',true);
  request.addEventListener('readystatechange', function() {
    if ((request.readyState==4) && (request.status==200)) {
      var welcome = document.getElementById('welcome');
      welcome.innerHTML = request.responseText;
    }
  });
request.send();
});
</script>

</body>
</html>

На сервере (с помощью php):

Получим данные. Если данные посланы через метод , то из глобального массива
. А если данные переданы с помощью метода , то из глобального
массива .
Используя эти данные, выполним некоторые действия на сервере. В результате которых получим некоторый ответ.
Выведем его с помощью .

<?php
$output = 'Здравствуйте, пользователь! ';
if ($_SERVER) {
  $output .= 'Ваш IP адрес: '. $_SERVER;
}
else {
 $output .= 'Ваш IP адрес неизвестен.';
}
echo $output;

Отправка изображения или файла ajax-запросом через jQuery

Jquery функция $.ajaxsetup()

Задача отправки файла или изображения на сервер без перезагрузки страницы довольно часто возникает. В этом примере разберу сразу 2 фишки: выбор файла по нажатию на кнопку, которая может быть оформлена как угодно, и отображение прогресса при передаче файла на сервер ajax-запросом.

html-код будет такой:

<button id="addfile"><span>Загрузить изображение</span><input type="file" id="load_file" value=""></button>

css код:

#addfile {
  position: relative;
  overflow: hidden;
  width: 180px;
  height: 34px;
}
#load_file {
  position: absolute;
  top: 0;
  left: 0;
  width: 180px;
  height: 34px;
  font-size: 0px;
  opacity: 0;
  filter: alpha(opacity:0);
}
#load_file:hover {
  cursor: pointer;
}

Суть идеи в том, что поверх кнопки выводится стандартный input для выбора файла, но он полностью прозрачен и имеет такие же размеры как кнопка. Таким образом, пользователь видит кнопку button, но когда наводит на нее курсор, фактически наводит на input. Соответственно, когда он нажимает на кнопку, на самом деле нажимается input выбора файла. Для того, чтобы не мигал курсор после выбора файла, размер шрифта задан 0px.

Теперь javascript код отправки файла на сервер с отображением прогресса:

$(function() {
  $('#load_file').on('change', loadfile);
});

function loadfile() {
  $('#addfile span').html('Загружено 0 %');
  files = $('#load_file').files;
  var form = new FormData();
  form.append('upload', files);
  $.ajax({
    url: '<url-адрес>',
    type: 'POST',
    data: form,
    cache: false,
    processData: false,
    contentType: false,
    xhr: function() {
      var myXhr = $.ajaxSettings.xhr();
      if (myXhr.upload) {
        myXhr.upload.addEventListener('progress',ShowProgress, false);
      }
      return myXhr;
    },
    complete: function(data){
      $('#addfile span').html('Загрузить изображение');
      $('#load_file').val('');
    },
    success: function(message){
      alert(message);
    },
    error: function(jqXHR, textStatus, errorThrown) {
      alert(textStatus+' '+errorThrown);
    }
  });
}

function ShowProgress(e) {
  if(e.lengthComputable){
    $('#addfile span').html('Загружено '+Math.round(100*e.loaded/e.total)+' %');
  }
}

При загрузке файла на сервер в кнопке будет показываться сколько % уже передано на сервер. После завершения загрузки название кнопки возвращается как было, а значение input-а с файлом устанавливается пустым, чтобы можно было снова выбирать новый файл.

Пример серверной части на php (по просьбе Евгения):

  $message = '';
  if (empty($_FILES) || $_FILES == "none") {
    $message = 'Вы не выбрали файл';
  } else if ($_FILES == 0 || $_FILES > 9437184) {
    $message = 'Размер файла не соответствует нормам (максимум 9 Мб)';
  } else if (($_FILES != 'image/jpeg') && ($_FILES != 'image/pjpeg') &&
             ($_FILES != 'image/gif') && ($_FILES != 'image/png')) {
    $message = 'Допускается загрузка только картинок JPG, GIF и PNG.';
  } else if (!is_uploaded_file($_FILES)) {
    $message = 'Что-то пошло не так. Попытайтесь загрузить файл ещё раз.';
  } else {
    $ftype = $_FILES;
    $fname = 'newname_image.'.($ftype == 'image/gif' ? 'gif' : ($ftype == 'image/png' ? 'png' : 'jpg'));
    if (move_uploaded_file($_FILES, $_SERVER.'/files/'.$fname)) {
      $message = 'Изображение успешно загружено.';
    } else {
      $message = 'Что-то пошло не так. Попытайтесь загрузить файл ещё раз.';
    }
  }
  exit($message);

Информация о загруженном изображении будет содержаться в $_FILES, т.к. скриптом файл добавлялся так: form.append(‘upload’, files); Соответственно, всё что требуется от php-программы — это проверить что файл соответствует ожидаемым параметрам, перенести файл в нужную папку (в примере в папку files) под нужным именем (в примере newname_image) и вернуть в браузер ответ, который в моем примере просто выводится пользователю командой alert(message);

Отправка формы со всеми данными ajax-запросом через jQuery

Введение в jquery, подключение jquery

Примерный код html-формы:

<form id="myform" action="" method="POST">
  <label for="user_name">Ваше имя:</label>
  <input name="user_name" value="" type="text" />
  <input type="submit" value="Отправить">
</form>

JavaScript код:

$('#myform').submit(function(e) {
  e.preventDefault();
  $.ajax({
    type: $(this).attr('method'),
    url: '<url-адрес>',
    data: $(this).serialize(),
    async: false,
    dataType: "html",
    success: function(result){
      alert('Форма отправлена');
    }
  });
});

Для того чтобы страница не перезагружалась при нажатии на кнопку «submit», сначала отменяем стандартые действия браузера использовав e.preventDefaults().

В параметре data мы передаем все поля формы использовав $(this).serialize() — эта функция преобразует все input-ы и select-ы в строку, пригодную для отправки на сервер.

Так же, здесь использован параметр async: false, чтобы пока форма не отправится на сервер больше ничего нельзя было нажать или сделать.

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

История и наследие jquery

<!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

2 AJAX POST Example, the jQuery way

So let’s get our hands dirty. Here’s our HTML5 and jQuery:

Let’s break down the not-so-clear parts of the method. The setting controls how data we receive from the server is treated. So if we want JSON from the server to be treated as text in our Javascript on the client side, for example, then we set this value as . If we don’t set the value at all, jQuery will try to figure out what the server sent and convert it intelligently. If it thinks it’s JSON, it’ll turn it into a JavaScript object; if it thinks it XML it’ll turn it into a native XMLDocument JavaScript object, and so on.

Next up is , which is the HTTP verb that we want to use. I’ll let you in on a little secret: since jQuery 1.9.0, you can use instead of . It could make things a little bit clearer for newcomers.

Following is . This is where understanding how HTTP requests and responses work helps a lot. What we set here gets sent as part of the HTTP header field . That’s important to note because we’re letting the server know ahead of time what type of content we’re sending, which allows the server to interpret the response correctly. For example, if you see a of you would know to process the content as JSON in your server-side code — it’s as simple as that.

Now, the setting is the data we’re going to send to the server. We can send data to the server in a variety of different formats, but the default is . That means we’ll be sending text to our server with our form data formatted in key-value pairs, like . Most, if not all, web server languages will pick up the key-value pairs and separate them for you either natively or through the use of libraries or frameworks.

Here’s how to do that in a few different languages:

Ruby with Sinatra
Python with web.py
Node.JS with Express and body-parser middleware

Most POST requests from a form will use the content type. I’ll also provide an alternative if you need to POST actual JSON from jQuery — if, for instance, you need to make a call to your own RESTful API.

The method has several events we can hook into to handle our AJAX responses accordingly: , , , and . The ones we care about most are and , so we’ll use these in our example.

One important thing to note is that the data parameter for the function will be dependent on the setting. So it’s completely possible to treat JSON coming from the server as a string by setting to . Many developers, including myself, occasionally get tripped up attempting to output their request in the method and then wonder why nothing is showing up when they try to render JSON as HTML, which doesn’t work at all.

As long as you know that the parameter can be transformed into a different data type, fixing that problem will be easy. If your AJAX server responses for the form will always be of one type — for instance, JSON — and you will always treat it as JSON, then it makes sense to set to . If you need to juggle between different data types, omit to allow jQuery to intelligently convert the data.

Our function is where we do things after we get a successful AJAX response, like updating a message in our page or search results in a table. Here is a good live example of jQuery AJAX and POST from one of my clients, a free keyword suggestion tool for advanced SEO marketers.

Now, on to the server side. From the client side, all we need to worry about is sending the right Content Type and Request body (the content we send along like the form data). On the server side we pick this up, process it, and respond accordingly.

It’s important to note that we need to format the response data correctly according to the we want to send back. If we want to send a simple text message we would respond with . If we want to respond with JSON, we’ll send a and a properly formatted JSON string without any extra characters before or after the string, like so:

This will allow jQuery to convert the string into JSON. Please do not try to build a JSON string manually; use your language’s built-in JSON function or libraries to do it for you. Trust me, it will save you time and headaches.

2.1 Server side code for our AJAX form

If you’re running PHP 5.4 or above, you can fire up a server by going into your terminal running the following commands:

If you’re on Mac, install Mac Ports and then php55 with:

Then run the development server:

Now open up your browser to http://localhost:8111.

Udemy

Сайт: https://www.udemy.comСтоимость: от 999 р.
Основы PHP программирования для начинающих

В курсе соединен ряд проблем, которые пришлось бы решать обычному разработчику. Например Вам придется довольно часто собирать данные пользователей, которые они вводят на сайте и записывать их в базу данных. Данный процесс рассматривается в курсе и показывается, как с помощью PHP можно обратиться в базу MySQL и получать или записать данные.

Чему вы научитесь

После курса Вы сможете понимать азы PHP и создавать на этом языке стандартные решения.
Научитесь с помощью PHP отправлять письма и делать записи в базы данных на сервере.
Пройдя курс Вы сможете спокойно редактировать любой PHP код и разбираться в готовых элементах например в Word Press.
Вы научитесь грамотно работать с данными и поймете азы объектно ориентированного программирования.
Вы поймете как устроен рабочий процесс разработки на PHP.
Вы узнаете о всех функциях необходимых для каждодневной работы.

Включаем кэширование для AJAX запросов

По умолчанию все AJAX запросы НЕ кэшируются браузером для этого PHP устанавливает специальные заголовки функцией nocache_headers().

Чаще всего AJAX запросы кэшировать и не надо, потому что они должны возвращать свежие данные, но бывают случаи когда такое кэширование может сэкономить ресурсы и увеличить скорость работы скрипта. Например, если у нас есть сложный фильтр товаров который юзеры используют постоянно. Тут было бы разумно кэшировать все результаты фильтра например на пару часов, все равно товары не добавляются с такой скоростью…

Как включить кэширование для указанных AJAX запросов смотрите во втором примере функции nocache_headers().

Получение json-данных с помощью getJSON

getJSON — укороченный вариант ajax-запроса методом GET и получением данных в виде json. Способ удобен, например, для получения какого-то массива с данными и последующей работы с ним.

$.getJSON('<url-адрес>', {par1:val1, par2:val2, ...}).success(function(data) {
  // что-то делаем с данными, например, обходим их в цикле и выводим:
  for (var i=0; i<data.length; i++) {
    console.log(data.text);
  }
}).error(function(xhr, textStatus, errorThrown) {
  alert('Ошибка: ' + textStatus+' '+errorThrown);
});

На стороне сервера программа формирует массив и преобразовывает его в json-строку, например, так:

$arr = array();
$arr = array('id' => 10, 'text' => 'тестовая строка 1');
$arr = array('id' => 20, 'text' => 'тестовая строка 2');
$arr = array('id' => 30, 'text' => 'тестовая строка 3');
echo json_encode($arr);

Точно так же можно передать с сервера и объекты stdClass, преобразовав их в json-строку.

Значения параметров

Параметр	Описание
url	Строка, содержащая URL адрес, на который отправляется AJAX запрос. Обязательный параметр.
data	Объект или строка, которые будут отправлены на сервер вместе с AJAX запросом. Данные, отправляемые на сервер добавляются к URL в строке запроса. Если значение параметра данных является простым объектом, то он кодируется и преобразуется в строку URL, прежде чем он будет добавлен к URL адресу. Необязательный параметр.
success	Функция обратного вызова, которая вызывается если AJAX запрос выполнится успешно. Необязательный параметр. Функция принимает следующие параметры: data — данные возвращенные с сервера. textStatus — строка описывающая статус запроса. jqXHR — объект jqXHR (до версии jQuery 1.4.x объект XMLHttpRequest).
dataType	Определяет тип данных, который вы ожидаете получить от сервера. Если тип данных не указан, то jQuery будет пытаться определить его на основе типа MIME из ответа (XML тип MIME приведет к получению XML, с версии jQuery 1.4 json будет давать объект JavaScript, script будет выполнять скрипт, а все остальное будет возвращено в виде строки). Необязательный параметр. Доступные типы (результат передается в качестве первого аргумента в функцию обратного вызова success): «xml» — возвращает XML документ, который может быть обработан с помощью jQuery. «html» — возвращает HTML как обычный текст, теги <script> будут обработаны и выполнены после вставки в объектную модель документа (DOM). «script» — расценивает ответ как JavaScript и возвращает его как обычный текст. Отключает кэширование с помощью добавления параметра к строке запроса `_=`, даже если парамета cache имеет значение true. Это превратит метод POST в GET для кроссдоменных запросов. «json» — расценивает ответ как JSON и возвращает объект JavaScript. Кроссдоменные «json» запросы преобразуются в «jsonp», если в параметрах запроса не указано jsonp: false. Данные JSON парсятся в строгом порядке и должны соответствовать общепринятому формату, любой некорректный JSON отвергается и выдается ошибка. С версии jQuery 1.9, пустой ответ не принимается, сервер должен вернуть в качестве ответа NULL, или {}. «jsonp» — загружает данные в формате JSON, используя при этом формат загрузки JSONP. Добавляет дополнительный параметр «?callback=?» в конец URL адреса для указания имени функции обработчика. Отключает кэширование путем добавления параметра `_=` к URL адресу,даже если парамета cache имеет значение true. «text» — обычная текстовая строка. несколько значений — значения разделяются пробелом. Начиная с версии 1.5, jQuery может преобразовать тип данных, который получен в `Content-Type` заголовка, в тип данных, который вам требуется. Например, если вы хотите, чтобы текстовый ответ был расценен как XML, используйте `«text XML»` для этого типа данных. Вы также можете сделать JSONP запрос, получить его в виде текста и интерпретировать его в формате XML: `«jsonp text XML»`. Следующая строка позволит сделать тоже самое: `«jsonp XML»`, jQuery будет пытаться конвертировать из JSONP в XML, после неудачной попытки попытается преобразовать JSONP в текст, а затем из текста уже в XML.

jQuery $.get() Method

The method requests data from the server with an HTTP GET request.

Syntax:

$.get(URL,callback);

The required URL parameter specifies the URL you wish to 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 retrieve data from a file on
the server:

Example

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

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

The second
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.asp»):

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

AJAX во внешней части WordPress

Первое в чем нужно убедиться — установлена ли на сайте библиотека jQuery.

Во фронт-энде (внешней части сайта) нужно использовать еще один хук для обработки AJAX запросов: wp_ajax_nopriv_(action). Этот хук в отличии от wp_ajax_(action), срабатывает для неавторизованных пользователей.

Т.е. чтобы создать обработчик запроса для всех пользователей: авторизованных и нет, PHP функцию нужно прикреплять сразу к двум хукам:

add_action( 'wp_ajax_(action)', 'my_action_callback' );
add_action( 'wp_ajax_nopriv_(action)', 'my_action_callback' );

‘wp_ajax_nopriv_(action)’ можно не указывать, если не нужно, чтобы AJAX запрос обрабатывался для неавторизованных пользователей.

Переменная `ajaxurl`

Напомню, что переменная есть только в админке и её нет в лицевой части сайта (фронт-энде), поэтому её нужно определить (создать). Но мы назовем её по-другому — , для фронта так удобнее, потому что так в объект myajax можно будет добавить еще данные связанные с AJAX запросом.

Правильный способ создать такую переменную — это использовать функцию wp_localize_script().

// Подключаем локализацию в самом конце подключаемых к выводу скриптов, чтобы скрипт
// 'twentyfifteen-script', к которому мы подключаемся, точно был добавлен в очередь на вывод.
// Заметка: код можно вставить в любое место functions.php темы
add_action( 'wp_enqueue_scripts', 'myajax_data', 99 );
function myajax_data(){

	// Первый параметр 'twentyfifteen-script' означает, что код будет прикреплен к скрипту с ID 'twentyfifteen-script'
	// 'twentyfifteen-script' должен быть добавлен в очередь на вывод, иначе WP не поймет куда вставлять код локализации
	// Заметка: обычно этот код нужно добавлять в functions.php в том месте где подключаются скрипты, после указанного скрипта
	wp_localize_script( 'twentyfifteen-script', 'myajax', 
		array(
			'url' => admin_url('admin-ajax.php')
		)
	);  

}

В результате, получим в head части сайта прямо перед скриптом ‘twentyfifteen-script’:

<script type='text/javascript'>
/* <![CDATA[ */
var myajax = {"url":"http://wptest.ru/wp-admin/admin-ajax.php"};
/* ]]> */
</script>
<script type='text/javascript' src='http://wptest.ru/wp-content/themes/twentyfifteen/js/functions.js?ver=20150330'></script>

На этом теория AJAX закончена, теперь все как для админ части, только вместо указываем и нужно прикрепить функцию обработчик на еще один хук .

Пример AJAX кода для фронт энда

<?php

add_action( 'wp_enqueue_scripts', 'myajax_data', 99 );
function myajax_data(){

	wp_localize_script('twentyfifteen-script', 'myajax', 
		array(
			'url' => admin_url('admin-ajax.php')
		)
	);  

}

add_action('wp_footer', 'my_action_javascript', 99); // для фронта
function my_action_javascript() {
	?>
	<script type="text/javascript" >
	jQuery(document).ready(function($) {
		var data = {
			action: 'my_action',
			whatever: 1234
		};

		// 'ajaxurl' не определена во фронте, поэтому мы добавили её аналог с помощью wp_localize_script()
		jQuery.post( myajax.url, data, function(response) {
			alert('Получено с сервера: ' + response);
		});
	});
	</script>
	<?php
}

add_action('wp_ajax_my_action', 'my_action_callback');
add_action('wp_ajax_nopriv_my_action', 'my_action_callback');
function my_action_callback() {
	$whatever = intval( $_POST );

	echo $whatever + 10;

	// выход нужен для того, чтобы в ответе не было ничего лишнего, только то что возвращает функция
	wp_die();
}

Код рассчитан на тему . Вставлять код можно в functions.php темы.

Этот код будет работать для любой темы, единственное что для этого нужно — это поменять название основного скрипта темы , который подключается после jquery.