duanju9104
2015-08-15 13:35
浏览 251

jQuery ajax beforeSend干扰.done()

In a website I have several ajax-parts that are loaded by events, mostly clicks. To inform the visitor a loading partial is shown. This works nice most of the time, but sometimes the ajax call is receiving the respons so quick it interferes with the beforeSend.

My typical structure looks like this:

$(document).on('click', '.handler', function() { 
  var target = $(this).attr('data-targetElement');

  $.ajax({
    url: '/ajax.php?someParameter=hasValue',
    beforeSend: showLoading(target)
  })
  .done(function(response) { 
    console.log('Hi there, I\'m done!');
    $('#' + target).html(response);
  });
});

// This is in a function because it's used by all ajax-calls
function showLoading(target) { 
  $('#' + target).html('My loading message');
}

The problem is, when I'm inspecting console messages, that the loading message is still shown even though the .done() was reached, because Hi there, I'm done! is shown.

So it looks beforeSend doesn't seem to have reached a completed state or something like that causing it to 'freeze', because the content in the targetElement is not updated with the response for the ajax-call.

I'm not sure how to solve to this. Any suggestions?

Update, Sorry for the typo, I just typed the exemplary code in here...

图片转代码服务由CSDN问答提供 功能建议

在一个网站中,我有几个由事件加载的ajax部分,主要是点击。 要通知访问者,显示加载部分。 这在大多数情况下都很好用,但有时ajax调用会快速接收响应,它会干扰beforeSend。

我的典型结构如下所示: \ n

  $(document).on('click','。handleler',function(){
 var target = $(this).attr('data-targetElement'); 
 
  $ .ajax({
 url:'/ ajax.php?someParameter = hasValue',
 beforeSend:showLoading(target)
})
 .done(function(response){
 console.log('Hi 在那里,我已经完成了!'); 
 $('#'+ target).html(response); 
}); 
}); 
 
 //这是一个函数,因为它是 由所有ajax-calls 
使用showLoading(target){
 $('#'+ target).html('我的加载消息'); 
} 
   
 
  

问题是,当我正在检查控制台消息时,即使到达.done(),仍然显示加载消息,因为你好,我已经完成了!

所以它看起来之前发送似乎没有达到完成状态或类似的东西导致它'冻结', 因为targetElement中的内容没有使用ajax-call的响应进行更新。

我不知道如何解决这个问题。 有什么建议吗?

更新, 请输入错字,我只是在这里输入示例代码...

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • duanbei2914 2015-08-15 13:48
    已采纳
    1. At first, you need to fix all syntax errors in your code. Remove ; in the middle of the statement.

      $.ajax({
        beforeSend: showLoading(target);
        //                             ^ SYNTAX ERROR
      })
      
    2. When you write showLoading(target) you call the showLoading() function immediately.

      If you need to set pass it as a callback with parameters, you need to pass a function, that returns your callback.

      beforeSend: function() {
          showLoading(target);
      }
      
    已采纳该答案
    打赏 评论
  • drsvw88664 2015-08-15 13:45

    Try removing syntax error semicolon ; at close of beforeSend , utilizing var target = $(this).data('targetelement'); for target variable

    $(document).on('click', '.handler', function() { 
      var target = $(this).data('targetelement');
      console.log(target)
      $.ajax({
        type:"POST",
        url: '/echo/html/',
        beforeSend: function() {showLoading(target)},
        data:{html:"Hi there, I\'m done!"}
      })
      .done(function(response) { 
        console.log(response);
        $('#' + target).html(response);
      });
    });
    
    // This is in a function because it's used by all ajax-calls
    function showLoading(target) { 
      $('#' + target).html('My loading message');
    }
    

    jsfiddle http://jsfiddle.net/4xp1aag8/1/

    打赏 评论

相关推荐 更多相似问题