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

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部分与“视图”部分分开。 所以我的问题是...我如何使按钮显示加载的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();

jQuery文档中的更多信息。

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

问题描述

1 个解决方案

解决方案1
0 2017-01-25 22:34:40

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

问题描述

1 个解决方案

解决方案1 0 2017-01-25 22:34:40

解决方案1
0 2017-01-25 22:34:40