В этой статье я опишу способ, как без перезагрузки страницы передать данные в WordPress, используя JQuery.
По сути, отличия как такового нет, если бы мы просто рассматривали сайт написанный на php и использовали JavaScript. При работе в Wordpres , мы в скрипте просто добавим одну строку, в которой передается название зарегистрированной функции, которая будет обрабатывать наши данные в Wordpress. Дело в том, что в WordPress все запросы отправляются на один файл – /wp-admin/admin-ajax.php, а функция, которая будет обрабатывать этот запрос определяется или в functions.php вашей темы, или это будет написанный вами плагин, где будет зарегистрирована функция обработчик AJAX запросов. В нашем случае, я буду приводить пример, где функцию мы будем размещать в functions.php.
Я рассмотрю варианты передачи значения некой переменой и передача массива с помощью метода JSON.
Для примера я, напишем код кнопки с value=”2”
|
1 2 3 |
<button id=”knopka” value="1">Тест</button> |
Наша задача, получить значение value и передать его по технологии AJAX в функцию, которая получит это значение и результат вернет, который мы, с помощью alert, выведем на странице.
Пишем скрипт, который будет отрабатывать по клику кнопки <button>. Не забываем про подключенную библиотеку jquery.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$('#knopka').click(function(){ var val_knopka = $(this).attr('value') $.ajax({ url: "/wp-admin/admin-ajax.php", method: 'post', data: { action: 'ajax_knopka', knopka: val_knopka, }, success: function (otvet) { alert(otvet) } }) }) |
В functions.php пишем функцию, которая будет обрабатывать запрос:
|
1 2 3 4 5 6 7 8 |
function test_zapros(){ $k=$_POST['knopka']; echo $k; die(); } add_action('wp_ajax_ajax_knopka', 'test_zapros' ); |
Этого будет достаточно, чтобы обработать запрос, и вернуть ответ.
Теперь рассмотрим вариант, как передать массив данных. В качестве примера будем использовать поле input с type=”checkbox”. Представим ситуацию, нам нужно отобрать поля, где стоит отметка checkbox, и значение value передать массивом используя JSON
Пример:
|
1 2 3 4 5 |
<input class="select_input" value="1" type="checkbox"> <input class="select_input" value="2" type="checkbox"> <input class="select_input" value="3" type="checkbox"> |
Отбор полей будет также происходить по клику мышкой по кнопке <button>
Пишем скрипт:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
$('#knopka').click(function(){ input_val=$('.select_input') var arr=[] var k=0 for(var i=0;i < input_val.length;i++){ if(input_val.eq(i).is(':checked')){ //Отбираем поля с отметкой arr[k]=input_val.eq(i).attr('value') k++ } } if(arr.length > 0){ var arrj=JSON.stringify(arr) //конвертируем в формат JSON $.ajax({ url: "/wp-admin/admin-ajax.php", method: 'post', dataType: 'json', data: { action: 'ajax_knopka', knopka: arrj, }, success: function (otvet) { alert(otvet) } }) } }) |
Теперь изменим функцию в functions.php , для приема JSON данных. Мы примем все значение value, просуммируем их, и вернем результат на экран. Массив у нас получается вида {1,2,3}
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function test_zapros(){ $k=$_POST['knopka']; $mas=json_decode(stripslashes($k),false); $itog=0; foreach($mas as $v){ $itog=$itog+$v; } echo $itog; die(); } add_action('wp_ajax_ajax_knopka', 'test_zapros' ); |
Если бы у нас массив был вида:{“Input1”:100,”Input2”:200}, то добраться до значений массива, например к полю Input1, в php файле, можно было бы вот так:
|
1 2 3 4 |
$mas=json_decode($k); echo $mas->Input1; |
Вот и все, все очень просто и без лишнего кода.
