Question

我正在调整我的功能，但有一个问题。我希望在#project-container填写HTML之前插入加载短信，并在插入response后消失。

但是，如果我插入：

$('#project-container').html("my text here");

......就在之前：

$('#project-container').html(response);

然后，response没有显示，因为div已经填充了“我的文字在这里”。我可以使用另一种方法吗？

    function projectShow() {
        $.ajax({
            type: 'POST',
            cache: false,
            url: ajaxURL,
            data: {'action': 'load-content', post_id: post_id },
            success: function(response) {
                $('#project-wrapper').addClass('activated');
                $('#project-container').html(response);         <---I want it inserted
                $('.post-container').addClass('fadeInUp');          before this line.
                $('.close-button').addClass('fadeOutDown');
                $('#project-wrapper .entry-title').shuffleLetters();
            return false;
            }
        });
    }

Answer 1

您应该在AJAX调用之前添加加载消息。在成功回调中完成它是没有意义的，因为这两个操作将在同一个循环中发生，并且您可能总是只看到一个。这应该这样做：

function projectShow() {
    // add the initial text here
    $('#project-container').html("my text here"); 
    // add the initial class here for height issues from the comments
    // $('#project-wrapper').addClass('activated');
    $.ajax({
        type: 'POST',
        cache: false,
        url: ajaxURL,
        data: {'action': 'load-content', post_id: post_id },
        success: function(response) {
            $('#project-wrapper').addClass('activated');
            $('#project-container').html(response);         <---I want it inserted
            $('.post-container').addClass('fadeInUp');          before this line.
            $('.close-button').addClass('fadeOutDown');
            $('#project-wrapper .entry-title').shuffleLetters();
        return false;
        }
    });
}

如评论中所述，如果您希望保留原始文本，则将响应附加到它（通过使用append（），或者将它们连接起来，或者您最喜欢的任何方法）。

请参阅以下两种方式：

function projectShow(keep) {
  $('#project-container').html("my text here");
  $.ajax({
    type: 'POST',
    cache: false,
    url: 'http://hayageektest.appspot.com/cross-domain-cors/post.php',
    //data: {'action': 'load-content', post_id: post_id },
    success: function(response) {
      //$('#project-wrapper').addClass('activated');
      if (keep)
        $('#project-container').append(response); 
      else
        $('#project-container').html(response); 
      //$('.post-container').addClass('fadeInUp');     //     before this line.
      //$('.close-button').addClass('fadeOutDown');
      //$('#project-wrapper .entry-title').shuffleLetters();
      return false;
    }
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button onclick="projectShow()">Click me</button>
<button onclick="projectShow(true)">This one will keep the original! Click it. <br /></button>

<div id="project-container"></div>

Answer 2

如果您需要“正在加载”消息，请在beforeSend事件中显示该消息，并将其隐藏在success上：

function projectShow() {
    $.ajax({
        type: 'POST',
        cache: false,
        url: ajaxURL,
        data: {'action': 'load-content', post_id: post_id },
        beforeSend: function() { $('#project-container').html("Loading, Please wait"); },
        success: function(response) {
            $('#project-wrapper').addClass('activated');
            $('#project-container').html(response);
            $('.post-container').addClass('fadeInUp');
            $('.close-button').addClass('fadeOutDown');
            $('#project-wrapper .entry-title').shuffleLetters();
        return false;
        }
    });
}

请参阅Ajax Events

在填充div之前插入加载文本消息？

2 个答案: