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

在启动超级简单的Ajax调用时，我已经尝试了许多方法来针对父元素和/或JS对象本身。我有3个div和同一个类，没有别的。当我点击一个时，我试图获得该DIV的.html(responseHere(，以简单地更改其中的内容，但如果不给它一个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>

EDIT：当我alert((输出$(this(的值时，我只得到[object object]

您必须保留对单击的元素的引用。在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(

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

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

$('.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(放入其中，最终您会得到答案。

相关内容

最新更新

热门标签：