Question

之前已经问过这个问题，我确实环顾四周，试过很多方法，但是没有执行。只有alert函数似乎有效。我在ajax中执行success:后尝试在POST上加载一个小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);

我对此Div的CSS：

#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代码将在您等待服务器返回数据时继续执行

EDIT2：我不确定您点击的是哪种类型的元素，但这里有两种方法：

1）将子元素添加到单击的元素中例如：<a #id="send"><div id=someElement></div></a>

2）在点击的元素旁边添加一个元素，并使用新的div

作为目标

Answer 2

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

  $.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>

加载div以获得ajax成功

3 个答案: