隐藏加载数据，一旦页面已加载 - Hide Loading Data, Once Page has loaded

最近问了很多关于jquery的问题，我正在尽我最大的努力去了解它。

无论如何，我正在发送一个Ajax HTTP请求到一个PHP页面，以便使登录表单不需要页面刷新。现在，由于连接数据库和获取登录信息等可能需要一些时间。

现在我确实有加载作为一个。html，但我怎么能隐藏加载数据一旦数据已经加载?

尝试使用一些函数，但似乎不起作用。

感谢到目前为止，这个网站在学习过程中帮助了我很多。

JavaScript:

$(document).ready(function() {
    // Make a function that returns the data, then call it whenever you
    // need the current values
    function getData() {
        return {
            user_login: $('#user_login').val(),
            pass_login: $('#pass_login').val()
        }
    }

        function loading(e) {
        $('#content').html('Loading Data');
    }
    function check(e) {
        e.preventDefault();
        $.ajax({
            url: 'ajax/check.php',
            type: 'post',
            data: getData(), // get current values
            success: function (data) {
                            $('#content').hide('slow');
                alert(9);
            }
        });
    }
    // Don't repeat so much; use the same function for both handlers
    $('#field').keyup(function(e) {
        if (e.keyCode == 13) {
    var username = $('#user_login').val();
        loading(e);
        check(e);
        }
    });
    $('#submit').click(function(e) {
        if (e.keyCode != 13) {
        loading(e);
        check(e);
        } 

    });
});

下面是HTML:

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
                <script src="js/login.js"></script>
                <div id="content"> Loading...</div>
                <div id="field">
            <input type='text' name='user_login' id='user_login' placeholder='eg: Mark@gmail.com'> <br>
            <input type='password' name='pass_login' id='pass_login'> <br>
        <input type="submit" name="submit" id="submit" value="Login">
            </div>

function check(){
    $.ajax({
        url: 'ajax/check.php',
        type: 'post',
        error: function(){
           alert('An error has occured.');
        },
        beforeSend: function(){
            $('#content').show('slow').html('Loading');
            //loading(e);
        },
        data: {user_login: $('#user_login').val(),pass_login: $('#pass_login').val()}, // get current values
        success: function (data) {
                        $('#content').hide('slow');
            alert(9);
        }
   });
}
$('#submit').click(function(){
   check();
});
$('#field, #field input').keyup(function(e){
        var username = $('#user_login').val();
        if (e.keyCode == 13) {
        check();
        } 
});

标记

    <div id="field">
        <input type='text' name='user_login' id='user_login' placeholder='eg:Mark@gmail.com'> <br>
        <input type='password' name='pass_login' id='pass_login'> <br>
        <input type="button" name="submit" id="submit" value="Login">
    </div>

祝你好运! !

首先，我不确定您的代码是否会返回成功。这段代码将帮助您发现响应是否成功。如果你得到一个浏览器警告。这意味着你有一个服务器端错误。要么url路径错误，要么服务器响应状态码为500(内部错误)。

$.ajax({
        url: 'ajax/check.php',
        type: 'post',
        error: function(){
           alert('An error has occured.');
        },
        beforeSend: function(){
            $('#content').show('slow').html('Loading');
            //loading(e);
        },
        data: getData(), // get current values
        success: function (data) {
                        $('#content').hide('slow');
            alert(9);
        }
});

完全重构你的代码将看起来像这样。选择第一或第二:

$.ajax({
        url: 'ajax/check.php',
        type: 'post',
        error: function(){
           alert('An error has occured.');
        },
        beforeSend: function(){
            $('#content').show('slow').html('Loading');
            //loading(e);
        },
        data: {user_login: $('#user_login').val(),pass_login: $('#pass_login').val()}, // get current values
        success: function (data) {
                        $('#content').hide('slow');
            alert(9);
        }
});