Question

我一直在阅读这些问题的答案，但我无法弄明白。主要是因为我知道零AJAX和javascript。

我有一个带按钮的页面，当用户点击该按钮时...... php脚本会扫描服务器中的文件夹，并使用数据库执行各种操作。

我希望在发生这种情况时显示加载gif。用户不会发送信息或接收任何内容，只需点击按钮即可。

我的第一次尝试是将用户发送到php文件......就像这样（只是一个例子）。并在DOM加载时放置一个显示图像的div。但这并不起作用，事实上，它甚至没有显示空白页面，我仍然可以看到我点击按钮的页面，因为php脚本的结尾有一个重定向，我只能看到浏览器的加载图标作为发生事件的指标。

<html>
    <head>
        <title></title>
        <script type="text/javascript">
            $(window).load(function() {
                $(".loader").fadeOut("slow");
            })
        </script>
        <style type="text/css">
            .loader {
                position: fixed;
                left: 0px;
                top: 0px;
                width: 100%;
                height: 100%;
                z-index: 9999;
                background: url('images/page-loader.gif') 50% 50% no-repeat rgb(249,249,249);
            }
        </style>
    </head>
    <body>
        <div class="loader"></div>
        <!-- PHP SHOULD DO STUFF HERE THEN REDIRECT BACK TO WHERE THE BUTTON WAS CLICKED-->
    </body>
</html>

据我所知，我必须将php部分与＆＃34; view＆＃34;分开。部分。所以我的问题是......我如何使按钮显示加载gif ...而在某种程度上我从服务器端运行php脚本。

我也尝试过：

<script type="text/javascript">
$('#buttonid').click(function(){
  $('.loader').show();
  $.ajax({
   type: 'POST',
   url: 'script.php',
   success:function(result){
       $('.loader').hide();
   }
}
</script>

但它也没有用。我在脚本上禁用了重定向，当它完成运行时，它将我带到那个页面，而不是留在我拨打电话的那个页面上。

Answer 1

您展示的Javascript很好，是正确的方法。不要在任何地方重定向，不要包含任何其他JS。如果我理解正确的话：

我禁用了脚本上的重定向，当它完成运行时，它会将我带到该页面，而不是保留在我拨打电话的那个页面上。

您的意思是点击按钮会将您转到script.php。您没有包含按钮HTML，但我猜您的按钮位于<form>内。当你单击它时，你的jQuery click处理程序被触发，但是表单也被提交，就像你根本没有Javascript一样。这会将你送到script.php，这就是你所看到的。

您需要停止默认表单提交，以便仅触发您的Javascript处理程序。你可以这样做：

// Event handlers are passed an event object as a parameter
$('#buttonid').click(function(e){

  // Prevent the normal action this event would cause, in this case 
  // submitting the form
  e.preventDefault();

  // ... continue with the rest of your code
  $('.loader').show();

the jQuery docs中的更多信息。

运行PHP脚本时显示加载图像

1 个答案: