Я знаком с использованием ajax обычным способом с помощью jQuery.
Некоторое время я играл вокруг него, но не понимаю, что WordPress должен заставить его работать …
То, что я здесь, взято из какого-то учебника или статьи.
Это находится в functions.php (в дочерней теме):
// code to load jquery - working fine // code to load javascript file - working fine // ENABLE AJAX : function add_ajax() { wp_localize_script( 'function', 'ajax_script', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) ); } $dirName = get_stylesheet_directory(); // use this to get child theme dir require_once ($dirName."/ajax.php"); add_action("wp_ajax_nopriv_function1", "function1"); // function in ajax.php add_action('template_redirect', 'add_ajax');
Сам jQuery загружается и работает нормально.
Я пробовал некоторые основные ajax, как показано ниже:
jQuery(document).ready(function($){ $('a.link').click(function(){ $.ajax({ url: ajax_script.ajaxurl, data: ({action : 'function1'}), success: function(data){ $('#result').html(data); } }); return false; }); });
Помимо этого, я не знаю, как я могу проверить, правильно ли он загружен с самого начала …
Любая помощь здесь будет оценена по достоинству.
РЕДАКТИРОВАТЬ:
В firebug эта ошибка:
ReferenceError: ajax_script is not defined url: ajax_script.ajaxurl,
По вашему запросу я положил это в ответ за вас.
Как предложил Hieu Nguyen в своем ответе, вы можете использовать переменную javascript ajaxurl для ссылки на файл admin-ajax.php. Однако эта переменная не объявлена на интерфейсе. Это просто объявить на переднем конце, поставив следующее в header.php вашей темы.
<script type="text/javascript"> var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>"; </script>
Как описано в документации WordPress AJAX , у вас есть два разных крючка – wp_ajax_ (действие) и wp_ajax_nopriv_ (действие). Разница между ними:
Все остальное описано в документации, приведенной выше. Счастливое кодирование!
PS Вот пример, который должен работать. (Я не тестировал)
Передняя часть :
<script type="text/javascript"> jQuery.ajax({ url: ajaxurl, data: { action: 'my_action_name' }, type: 'GET' }); </script>
Задняя часть :
<?php function my_ajax_callback_function() { // Implement ajax function here } add_action( 'wp_ajax_my_action_name', 'my_ajax_callback_function' ); // If called from admin panel add_action( 'wp_ajax_nopriv_my_action_name', 'my_ajax_callback_function' ); // If called from front end ?>
ОБНОВЛЕНИЕ Несмотря на то, что это старый ответ, кажется, он продолжает получать большие пальцы от людей – это здорово! Я думаю, что это может быть полезно для некоторых людей.
WordPress имеет функцию wp_localize_script . Эта функция принимает в качестве третьего параметра массив данных, предназначенный для перевода, например:
var translation = { success: "Success!", failure: "Failure!", error: "Error!", ... };
Таким образом, это просто загружает объект в тег заголовка HTML. Это можно использовать следующим образом:
Бэкэнд :
wp_localize_script( 'FrontEndAjax', 'ajax', array( 'url' => admin_url( 'admin-ajax.php' ) ) );
Преимущество этого метода заключается в том, что он может использоваться как в плагинах тем, так и в качестве тем, которые вы не жестко кодируете в URL-адрес переменной ajax URL.
На переднем конце URL теперь доступен через ajax.url
, а не просто ajaxurl
в предыдущих примерах.
Во-первых, вы должны прочитать эту страницу полностью http://codex.wordpress.org/AJAX_in_Plugins
Во-вторых, ajax_script
не определен, поэтому вы должны изменить на: url: ajaxurl
. Я не вижу вашу function1()
в приведенном выше коде, но вы уже можете определить ее в другом файле.
И, наконец, узнайте, как отлаживать вызов ajax с помощью Firebug, вкладки в сети и консоли будут вашими друзьями. На стороне PHP, print_r()
или var_dump()
будут вашими друзьями.
Лично я предпочитаю делать ajax в wordpress так же, как и делать ajax на любом другом сайте. Я создаю процессорный php-файл, который обрабатывает все мои запросы ajax и просто использует этот URL. Так вот, из-за htaccess не совсем возможно в wordpress, поэтому я делаю следующее.
1. в моем файле htaccess, который живет в моей папке wp-content, я добавляю это ниже того, что уже есть
<FilesMatch "forms?\.php$"> Order Allow,Deny Allow from all </FilesMatch>
В этом случае файл моего процессора называется forms.php – вы поместили бы это в свою папку wp-content / themes / themeName вместе со всеми вашими другими файлами, такими как header.php footer.php и т. Д. … он просто живет в вашей теме корень.
2.) В моем коде ajax я могу использовать свой url как это
$.ajax({ url:'/wp-content/themes/themeName/forms.php', data:({ someVar: someValue }), type: 'POST' });
очевидно, вы можете добавить любые ваши вещи до, успеха или типа ошибки, которые вы хотели бы … но да, это (я считаю), более простой способ сделать это, потому что вы избегаете всей глупости, говорящего в WordPress в 8 разных местах, что и это также позволит вам избежать других вещей, которые вы видите, когда люди делают, где они помещают js-код на уровне страницы, чтобы они могли окунуться в php, где я предпочитаю, чтобы мои файлы js были разделены.
Используйте wp_localize_script и передайте URL:
wp_localize_script( some_handle, 'admin_url', array('ajax_url' => admin_url( 'admin-ajax.php' ) ) );
затем внутри js, вы можете называть его
admin_url.ajax_url
Я думал, что, поскольку файл js уже загружен, мне не нужно было загружать / завершать его снова в отдельной функции add_ajax.
Но это должно быть необходимо, или я сделал это, и теперь он работает.
Надеюсь, это поможет кому-то другому.
Вот исправленный код из вопроса:
// code to load jquery - working fine // code to load javascript file - working fine // ENABLE AJAX : function add_ajax() { wp_enqueue_script( 'function', 'http://host/blog/wp-content/themes/theme/js.js', array( 'jquery' ), '1.0', 1 ); wp_localize_script( 'function', 'ajax_script', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) ); } $dirName = get_stylesheet_directory(); // use this to get child theme dir require_once ($dirName."/ajax.php"); add_action("wp_ajax_nopriv_function1", "function1"); // function in ajax.php add_action('template_redirect', 'add_ajax');