Question

我的情况是，我有很多JavaScript个依赖项，我不知道哪个AJAX调用<form>默认submission是prevented，其中大部分是{ {1}}，cdn加载到success message。

此处，我使用了setTimeout()，demo只有really不知道ajax call何时完成。

提示我（AJAX完成）：content将加载到

我的问题是如何$('#message').text('');将data加载到这里我只使用setTimeout()进行演示。

以下是代码段和JSFiddle：

$('#submit').click(function(e){
  e.preventDefault();
  $('#message').text('Please wait.........');
  setTimeout(function(){
     $('#contentLoadsHereFirst').text('Message Has Been Sent Successfully');
   },1500);
  //my pseudo code
  
 /*if($('#contentLoadsHereFirst').html() != ''){
    $('#message').text(''); 
  }*/
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="submit" name="submit" value="Update" id="submit">

<p id="contentLoadsHereFirst"></p>

<p style="color:red;" id="message"></p>

Answer 1

jQuery ajax method有一个成功回调，您可以隐藏加载消息。

对于您的代码段，您可以添加在setTimeout函数中隐藏消息的代码块。

＆＃13;

$('#submit').click(function(e){
  e.preventDefault();
  $('#message').text('Please wait.........');
  setTimeout(function(){
     $('#contentLoadsHereFirst').text('Message Has Been Sent Successfully');
  if($('#contentLoadsHereFirst').html() != ''){
    $('#message').text(''); 
  }
   },1500);
  //my pseudo code
  
   
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="submit" name="submit" value="Update" id="submit">

<p id="contentLoadsHereFirst"></p>

<p style="color:red;" id="message"></p>

＆＃13;

另一种解决方案是将全局处理程序附加到ajax（此处更多详细信息https://api.jquery.com/ajaxComplete/）

$( document ).ajaxComplete(function( event, xhr, settings ) {
  if ( settings.url === "ajax/test.html" ) {//a way to filter the responses
   $('#message').text(''); //here you ca hide your div
  }
});

Answer 2

尝试以下代码格式：

$('#submit').click(function(e){
 e.preventDefault(); 
   $.ajax({
        url: 'Your Action Link',
        data: {},//additional data
        type: "POST",
        beforeSend: function () { 
          $('#message').text('Please wait......'); 
        },
       success: function (response) { 
          $('#contentLoadsHereFirst').text(response.message);
       },
      error: function (xhr, textStatus, error) { 
         console.log(error.messge);
      }
    }); 
});

如何知道数据或内容被加载到元素中

2 个答案: