Question

第一次在这里提问，而不是专业人士。

我有一个表单，当您单击提交按钮时，它会使用该scraper.php来搜索信息。

内容被刮除有时需要几秒钟（10~）才能加载，所以我希望在刮擦时有一个加载gif显示。

我用加载栏创建了一个div，并用css设置了它，并将其设置为none;但是当你点击提交时它永远不会出现。

下面是js代码以及我试图用来使其工作的代码的另一个“旧”版本。非常感谢任何帮助。

$("#search").submit(function(e) {
    $('#wait').show();
    var url = "scraper.php";
    $.ajax({
        type: "POST",
        url: url,
        data: $("#search").serialize(),
        success: function (data) { 
            render (data); 
            $('#wait').hide();
        }

    });
    e.preventDefault(); // avoid to execute the actual submit of the form.

这是我尝试的旧代码：

$("#search").submit(function(e) {
var url = "scraper.php";
$.ajax({
type: "POST",
 url: url,
 beforeSend: function() { $('#wait').show(); },
 complete: function() { $('#wait').hide(); },
 data: $("#search").serialize(),
       success: function (data) { render (data); }

});

以下是各自的HTML＆amp; CSS代码：

<div id="wait"></div>

#wait {
display:    none;
position:   fixed;
z-index:    1000;
top:        0;
left:       0;
height:     100%;
width:      100%;
background: rgba( 255, 255, 255, .8 ) 
            url('http://i.stack.imgur.com/FhHRx.gif') 
            50% 50% 
            no-repeat;
}

谢谢！

Answer 1

确实有效，请参阅：

＆＃13;

function showwait() {
  $('#wait').show();
}

＆＃13;

#wait {
display:    none;
position:   fixed;
z-index:    1000;
top:        0;
left:       0;
height:     100%;
width:      100%;
background: rgba( 255, 255, 255, .8 ) 
            url('http://i.stack.imgur.com/FhHRx.gif') 
            50% 50% 
            no-repeat;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wait"></div>

<button onclick="showwait();">Show</button>

＆＃13;

您需要做的是将$('#wait').show();部分移动到函数的开头，如下所示：

$("#search").submit(function(e) {
  $('#wait').show();
  var url = "scraper.php";
  $.ajax({
    type: "POST",
    url: url,
    complete: function() { $('#wait').hide(); },
    data: $("#search").serialize(),
    success: function (data) { render (data); }
  });
});

Answer 2

你拥有它。我会改变关于CSS的一些事情。这是一个使用您的代码的JSFiddle，展示了如何做到这一点。

https://jsfiddle.net/iamjpg/aep4hguh/

CSS

#wait {
  display: none;
  position: absolute;
  z-index: 1000;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba( 255, 255, 255, .8) url('http://i.stack.imgur.com/FhHRx.gif') center center no-repeat;
}

的Javascript

// Mimic Ajax Call
var submitForm = function() {
    $('#wait').show();
  $.ajax({
    method: 'get',
    url: ' https://jsfiddle.net/echo/jsonp/',
    dataType: 'jsonp',
    success: function() {
        // Mimic wait
      setTimeout(function() {
        $('#wait').hide();
        alert('DONE!');
      }, 5000)
    }
  })
}

$('button').on('click', submitForm)

HTML

<div id="wait"></div>
<button>
  Submit Form
</button>

使用ajax调用加载条显示时遇到问题

2 个答案: