Question

在启动超级简单的Ajax调用时，我尝试了很多方法来定位父元素和/或JS对象本身。我有3个同一类的div，仅此而已。当我点击一个时，我试图获得一个.html（responseHere）到那个DIV来简单地改变其中的内容，但我找不到一种方法来选择它而不给它一个ID等。

使用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>

编辑：当我提醒（）出$（this）的值时，我只得到[object Object]

Answer 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;

（这意味着您还必须在Ajax调用中将数据类型从json更改为text）

Answer 2

你的问题是，在Ajax调用中，this是xhr对象，而不是.box。

存储$box = $(this);，然后执行$box.html(data);

Answer 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）放到它，最后你会得到答案。 / p>

jQuery：将AJAX内容加载到'this'的父级中

3 个答案: