Question

请建议我使用getSpinner（）和我的ajax调用来显示和隐藏beforeSend上的微调器图像并完成ajax调用。真的很感激任何帮助。谢谢！

我有一个Ajax调用：

$j.ajax({ 
type : "POST", 
url : //service call, 
data : JSON.stringify(request_data), 
contentType : "application/json", 
dataType : "json", 
async : false, //Forcing this sync 
success : function (result) { 
  //logic to generate pdf
}

我有getSpinner（）函数：

function getSpinner() {
    var loadingimage = $j('<div id="spinner" class="spinnerdiv"><img id="img-spinner" class="ajax-spinner" src="rotation.gif"></div>');
    return loadingimage;

}

Answer 1

您应该首先在页面上拥有html元素。然后，您可以定义2个单独的函数来显示和隐藏微调器

你的js编辑了一下

function getSpinner() {
  var loadingimage = '<div id="spinner" class="spinnerdiv">
  <img id="img-spinner" class="ajax-spinner" src="rotation.gif" />
  </div>'
  return loadingimage;
 }

$j.ajax({ 
type : "POST", 
url : //service call, 
data : JSON.stringify(request_data), 
contentType : "application/json", 
dataType : "json", 
async : false, //Forcing this sync
beforeSend: function(){
  var spinnerHtml = getSpinner();
   //check that it doesn't exist
  if($('#spinner').length < 1){
   //add spinner
   $("WhereYouWantItToGo").html(spinnerHtml);
  }
}

success : function (result) { 
  //logic to generate pdf
},
error : function(){

},
complete : function(){
    //check that it does exist and remove
    if($('#spinner').length > 0){
      $('#spinner').remove();
    }
}
});

Answer 2

试试这个我试过这样的。而且它真的有效。

<script type="text/javascript">
    $(document).ready(function()
    {
        $('#loading')
            .hide()
            .ajaxStart(function() {
                $(this).show();
            })
            .ajaxStop(function() {
                $(this).hide();
            });
    });
</script>

<div id="loading">
        Loading....
</div>

如何使用ajax调用获取加载微调器图像

2 个答案: