Загрузка контента в div с помощью AJAX

Question

Загрузка контента в div с помощью AJAX

21 дек. 2016 г., 10:31:57

Просмотры: 15.6K

Голосов: 1

Пожалуйста, дайте совет. Я совсем новичок в AJAX. У меня есть список постов, при клике на который нужно отображать информацию о посте в div без перезагрузки страницы. Я знаю, что нужно использовать AJAX, поэтому создал файл loadcontent.php в корневой папке и использовал код ниже, но не знаю, как отправлять и получать данные через AJAX. Мне нужно передать id, чтобы получить информацию о посте.

<script>
   $(document).ready(function(){

    $.ajaxSetup({cache:false});
        $(".post-link").click(function(){
        var post_id = $(this).attr("rel"); // получаем id поста
        $("#post-container").html("загрузка контента...");
        $("#post-container").load("/loadcontent.php");
       return false;
    });

  });
</script>

Yoona

39

записи ajax

Все ответы на вопрос

Комментарии

Привет, у меня ошибка в консоли: my apiurl не определена

Yoona

21 дек. 2016 г. 11:29:25

Можешь подсказать, в чем может быть проблема? Спасибо за ответ.

Yoona

21 дек. 2016 г. 11:36:04

Это потому что JS не видит myapiurl в своей области видимости... Твой ajax-запрос работает?

Kaeles

21 дек. 2016 г. 12:06:50

Я рекомендую вам прочитать эту документацию: https://codex.wordpress.org/AJAX_in_Plugins Мое решение самое простое, но не самое лучшее. Внимательно изучите эту документацию, и у вас больше не будет проблем с Ajax-запросами в WordPress.

Kaeles

21 дек. 2016 г. 12:12:40

Попробуйте заменить 'myapiurl' на 'ajaxurl'. Похоже, это URL по умолчанию, предоставляемый WordPress.

Kaeles

21 дек. 2016 г. 12:16:26

Показать остальные 3 комментариев

HTML:

<button class="the-btn">Нажми меня</button>
<div class="container"></div>

JavaScript:

<script>
jQuery(".the-btn").click(function(){

    var param1 = 'что-то';
    var param2 = 'что-то еще';

    $("div.container").html("загрузка содержимого....");

    jQuery.ajax({
        url: ajaxurl,
        type: POST, //'post|get|put'
        data: {
            action: 'my_php_function_name', 'param1':'что-то', 'param2':'что-то еще'
           
        },
        success: function(data) {
            // Что нужно сделать при успехе...
            jQuery("div.container").html(data);

        },
        fail: {
            // Что нужно сделать при ошибке...
            jQuery("div.container").html("не удалось загрузить данные");
        }
    })
    return false;
});
</script>

Добавьте в functions.php:

//Чтобы функция работала и для посетителей, и для авторизованных пользователей:

add_action('wp_ajax_load_my_php_function_name', 'my_php_function_name'); 
add_action('wp_ajax_nopriv_my_php_function_name', 'my_php_function_name'); 

function my_php_function_name() {

    $param1 = $_POST['param1'];
    $param2 = $_POST['param2'];

    echo $param1." ".$param2;

}

Если ajaxurl не определен (хотя должен быть), добавьте это:

<script type="text/javascript">
var ajaxurl = '<?php echo str_replace( array('http:', 'https:'), '', admin_url('admin-ajax.php') ); ?>';
</script>

Больше информации об AJAX в WordPress: https://codex.wordpress.org/AJAX_in_Plugins

samjco-com

599

14 апр. 2022 г. 08:03:41

Kaeles 64 · Accepted Answer · 2016-12-21T10:59:49Z

Используйте Ajax API, предоставляемый WordPress.

Для начала настройте ваш Ajax-запрос:

<script>
$(".post-link").click(function(){
    var post_id = $(this).attr("rel"); //это ID записи
    $("#post-container").html("загрузка содержимого");
    $.ajax({
        url: myapiurl.ajax_url,
        type: 'post|get|put',
        data: {
            action: 'my_php_function_name',
            post_id: post_id
        },
        success: function(data) {
            // Что нужно сделать...
        },
        fail: {
            // Что нужно сделать...
        }
    });
    return false;
});
</script>

Теперь вам нужно создать обработчик в WordPress. Вы можете поместить этот код в файл functions.php вашей темы или в файл плагина.

add_action( 'admin_enqueue_scripts', 'my_ajax_scripts' );
function my_ajax_scripts() {
    wp_localize_script( 'ajaxRequestId', 'myapiurl', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}

И затем... ваша функция, которая получает записи

function my_php_function_name() {
    // Что нужно сделать...
}

PS: Никогда не размещайте код в корневой папке установки. Используйте functions.php вашей темы или создайте плагин. Это очень важно для удобства поддержки и безопасности. Удачи :)