为ajax成功加载div

Question

以前有人问过这个问题，我确实环顾四周，尝试了很多方法，但没有执行。只有alert 函数似乎有效。在 ajax 中执行我的POST 后，我试图在success: 上加载一个小 div。这是我的代码：

$("#send").click(function(e) { e.preventDefault();

          $.ajax({
            type: 'POST',
            url: 'actions/update.php',
            data: $('#content').serialize(),
            success: function() {
          $(this).html('<div id="status">Saved!</div>');
          }
          });

        });

      $('#status').delay(5000).fadeOut(400);

我的 CSS 到这个 Div：

#status {
position:fixed;
top:50%;
left:50%;
z-index:100000;
width:150px;
height:150px;
margin:-75px 0 0 -75px;
background-color:rgba(0,0,0,0.7);
border-radius:150px;
font-size:30px;
line-height:150px;
font-weight:700;
color:#fff;
text-align:center;
cursor:default; }

我会在某处引起冲突吗？这是因为e.preventDefault(); 任何帮助或链接将不胜感激！

Answer 1

$("#send").click(function(e) { e.preventDefault();
          var that = $(this);
          $.ajax({
            type: 'POST',
            url: 'actions/update.php',
            data: $('#content').serialize(),
            success: function() {
          that.html('<div id="status">Saved!</div>');

          $('#status').delay(5000).fadeOut(400);
          }
          });

        });

这里的问题是this 不是你认为的回调。试试上面的

编辑： 回应您的评论：

文本被新的div 覆盖。解决这个问题的一种方法是将新的 div 插入到原始元素的子元素中。要获得褪色效果，您还必须将其放入回调中。否则它将在 ajax 调用返回之前执行。这是因为 ajax 调用是异步的，并且在您等待服务器返回数据时，其余的 JavaScript 代码将继续执行

编辑2： 我不确定你点击的是什么类型的元素，但这里有两种方法：

1) 在被点击的元素中添加一个子元素 例如：<a #id="send"><div id=someElement></div></a>

2) 在被点击的元素旁边添加一个元素，并使用新的 div 定位它

Answer 2

在 $.ajax 回调中，上下文（this）默认是 $.ajax 返回的 jqXHR 对象。
但是，您可以使用 $.ajax 方法的配置对象中的 context 属性来设置您想要的任何内容。例如

  $.ajax({
    type: 'POST',
    url: 'actions/update.php',
    data: $('#content').serialize(),
    context: this, //<----
    success: function() {
      $(this).html('<div id="status">Saved!</div>');
    }
  });

这会将所有回调中的上下文设置为调用函数中的上下文。

Answer 3

$("#send").click(function(e) { 
    e.preventDefault();
    $.ajax({
        type: 'POST',
        url: 'actions/update.php',
        data: $('#content').serialize(),
    }).done(function() {
        $('#status').html('Saved!');
    });
$('#status').delay(5000).fadeOut(400);
<div id='status'></div>