Question

data.php

<?php
for($i=0;$i<=10000000;$i++){    
}
$name = strtoupper($_REQUEST['urname']);
$birth = strtoupper($_REQUEST['urbirth']);
if(isset($name)){
    $html = "<p>Your name: <b>".$name."</b></p>";
    $html .= "<p>Your birthplace: <b>".$birth."</b></p>";   
    print($html);
}
?>

的index.html

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
    </script>
    <script type="text/javascript">
    $(document).ready(function() {  
        $('#preloader').hide();     
        $('#preloader')
            .ajaxStart(function(){
                $(this).show();
            }).ajaxStop(function(){
                $(this).hide();
            });                                                 
        $('#form form').submit(function(){
            $('#content').empty();
            $.get('data.php', $(this).serialize(), function(data){                          
                $('#content').html(data);
            });         
            return false;
        });
    });
    </script>
</head>
<body>
<div id="form">
<form>
Name : <input type="text" name="urname"><br />
Birthplace : <input type="text" name="urbirth"><br />
<input type="submit" name="submit" value="Submit">
</form>
</div>
<div id="preloader">loading...</div>
<div id="content">
</div>
</body>
</html>

问题：

当我点击提交按钮时，loading...从未显示，为什么？

Answer 1

从jQuery 1.8 ajaxStart/ajaxStop/...开始，只能绑定到document（link）。请将您的代码更新为：

$(document)
    .ajaxStart(function(){
        $('#preloader').show();
    }).ajaxStop(function(){
        $('#preloader').hide();
    });

Answer 2

$(document)
            .ajaxStart(function(){
                $('#preloader').show();
            }).ajaxStop(function(){
                $('#preloader').hide();
            });

如果您只想为提交表单显示预加载器，请使用：

$('#form form').submit(function(){
            $('#content').empty();
            $('#preloader').show();
            $.get('data.php', $(this).serialize(), function(data){                          
                $('#content').html(data);
            }).always(function(){
                $('#preloader').hide();
            });  

        return false;
    });

在jquery中使用ajaxStart的问题

2 个答案: