0

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...ても何も表示されないのはなぜですか?

4

2 に答える 2

1

jQuery 1.8 以降は( linkajaxStart/ajaxStop/... )にのみバインドできます。コードを次のように更新してください。document

$(document)
    .ajaxStart(function(){
        $('#preloader').show();
    }).ajaxStop(function(){
        $('#preloader').hide();
    });
于 2013-07-06T09:09:54.477 に答える
1 
$(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;
    });
于 2013-07-06T09:10:46.923 に答える