jQuery：将 AJAX 内容加载到“this”的父级中答案

【问题标题】：jQuery: Loading AJAX content into parent of 'this'jQuery：将 AJAX 内容加载到“this”的父级中
【发布时间】：2011-08-12 00:56:03
【问题描述】：

在启动超级简单的 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>

编辑：当我 alert() 出 $(this) 的值时，我只得到 [object Object]

【问题讨论】：

标签： jquery ajax css-selectors

【解决方案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）

【讨论】：

我试过你的代码，但没有给出结果。当 'this' 是选定的 DIV 对象时，'this' 怎么引用窗口对象？
@Melanie：你的意思是它不会改变输出吗？你也改变了PHP？如果没有，它将无法正常工作。在回调内部，this 不引用点击的元素。
感谢您的启发。不过，使用 JSON_ENCODE -does- 工作。
@Melanie：是的，你是对的。不知何故，我想到在 JSON 字符串的顶层必须有一个对象或数组。

【解决方案2】：

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

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

【讨论】：

谢谢！这正是我一直在寻找的。已经尝试过类似的组合，但没有结果。

【解决方案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）放到它上面，最后你会得到答案。

【讨论】：

或者如果使用 ES6 特性，只需使用箭头函数。