頁面加載后，隱藏加載數據

Question

最近一直在問很多關於jquery的問題，我正在努力學習有關它的很多知識。

無論如何，我正在向PHP頁面發送Ajax HTTP請求，以形成登錄表單而無需刷新頁面。 現在，由於連接數據庫並獲取登錄信息等可能需要一些時間。

現在，我確實已將文件加載為.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>

Answer 1

首先，我不確定您的代碼是否會返回成功。 此代碼將幫助您確定響應是否失敗。 如果收到瀏覽器警報。 這意味着您有服務器端錯誤。 其網址路徑錯誤或服務器響應狀態碼為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);

        }

});

Answer 2

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>

祝好運！！！