Блог

Главная - Вопросы по программированию - jQuery: загрузка содержимого AJAX в родительский элемент ‘this’

jQuery: загрузка содержимого AJAX в родительский элемент ‘this’

#jquery #ajax #css-selectors

#jquery #ajax #css-селекторы

Вопрос:

Я опробовал множество способов нацеливания на родительский элемент и / или сам объект JS при инициировании супер простого Ajax-вызова. У меня есть 3 раздела с одним и тем же классом, не более того. Когда я нажимаю на один, я пытаюсь получить .html (responseHere) для этого DIV, чтобы просто изменить содержимое в нем, но я не могу найти способ выбрать его, не указывая ему идентификатор и т.д.

Javascript:

 $(document).ready(function(){

$('.box').click(function(){

    $.get('ajax.php', function(data){
        $(this).html(data);
    }, 'json');



  });   
});

PHP:

 <?php

$var = 'This is some new content!';

echo json_encode($var);

?>

HTML:

 <div class="box">
    Click me to change my content
</div>

РЕДАКТИРОВАТЬ: когда я выдаю alert () значение $ (this) Я получаю только [object Объект]

Ответ №1:

Вы должны сохранить ссылку на выбранный элемент. Внутри обратного вызова Ajax this ссылается на window объект:

 $('.box').click(function(){
    var self = this;
    $.get('ajax.php', function(data){
        $(self).html(data);
    }, 'json');
});

Кроме того, json_encode не сработает, вам нужно передать массив или объект, но не строку. Либо создайте правильный JSON:

 $var = array('This is some new content!');

echo json_encode($var);

Похоже, простая строка действительно является допустимым JSON.

Здесь нет причин вызывать json_encode . Вы можете просто вернуть текст:

 echo $var;

(что подразумевает, что вам также необходимо изменить тип данных с json на text в вызове Ajax)

Комментарии:

1. Я пробовал ваш код, но он не дал результатов. Как ‘this’ может ссылаться на объект window, когда ‘this’ является выбранным объектом DIV?

2.@Melanie: Вы имеете в виду, что это не меняет результат? Вы также изменили PHP? В противном случае это не сработает. Внутри обратного вызова this не ссылается на выбранный элемент.

3. Спасибо за разъяснение. Тем не менее, использование JSON_ENCODE -действительно- работает.

4. @Melanie: Да, ты права. Почему-то я имел в виду, что на верхнем уровне строки JSON должен быть объект или массив.

Ответ №2:

Ваша проблема в том, что внутри Ajax-вызова this находится объект xhr, а не .box больше.

Сохраните $box = $(this); и позже выполните $box.html(data);

Комментарии:

1. Спасибо! Это именно то, что я искал. Уже пробовал подобную комбинацию, но безрезультатно.

Ответ №3:

 $('.close-btn').on('click touch',function () {
    // store this to a variable for later use
    var cc = $(this);
    $.ajax({
        url:'del.php',
        type:'POST',
        data:{id:this.id},
        dataType:'html',
        timeout:1000,
        error:function () {
            console.log('close failed');
        },
        success:function () {
            console.log(cc);
            cc.remove();
        }
    });
})

Привет, посмотри на мой код, это то, что тебе нужно, сохрани это в переменной (cc), и в случае успеха ajax мы добавим к нему переменную (cc), наконец, ты получишь ответ.

Комментарии:

1. Или, если используются функции ES6, просто используйте функцию со стрелкой.