使用jquery加載功能從另一個php文件登錄

Question

我想使用Aptana IDE和xampp創建一個網站，它有幾個頁面。 索引頁面是所有未登錄系統的用戶的位置，而主頁是所有未登錄系統用戶的位置。 我是開發網站的新手。 因此，在開發過程中，我正在改變很多重要的事情。 我的問題開始了。

我使用HTML5，CSS，Javascript，JQuery和Php分別創建了日志和簽名頁。 為了獲得更高質量的服務，決定同時使用Ajax。 這些頁面正常工作，日志頁面可以使用jquery控制驗證

$('#login-form').validate({
//validation rules, messages and submitHandler(ajax code) goes here});

並且通過使用ajax，它可以與php文件和mysql數據庫進行通信，從而可以檢查用戶是否存在。

$.ajax({
                type: 'POST',
                url: 'log.php',
                data: strAjax, //username and password
                success: function(data) { //data is echoing from php file either as true or false
                    if(data) {
                        window.location.href = "home.php";
                    }
                    else {
                        //some error messages
                    }
                }
            });

標牌系統可以正常工作。 但是由於空虛，我不喜歡這些頁面的設計。 因此，當用戶單擊“登錄”按鈕時，在索引文件中，日志文件顯示在具有jquery加載功能的div中。

$(".jumbotron").load("login.html").hide().fadeIn(1500).delay(5000);

標志系統也是如此。 看起來不錯，我很滿意，但是...整個系統混亂了。 （我想哭）我必須在開始編寫網站代碼之前考慮一下，我知道這很糟糕，但這是我第一個完整的網站。 如何才能以這種方式使系統正常工作？ 我在互聯網上搜索了一些頁面，他們說ajax不能跨頁面或類似的東西工作。 我也是堆棧溢出的新手，所以一些重要的事情將被遺忘。 如果您需要更多信息，我可以編輯。

謝謝和問候...

編輯1：

<div class="jumbotron">
  <div class="container">
    <h1>//sometext</h1>
    <p>//some text</p>
  </div>
</div> 

首先，這是顯示在屏幕上。 並且當用戶按下登錄按鈕時，上面的jquery加載功能就會運行。 並加載本身可以正常運行的login.html。

<form id="login-form" class="text-left">
                        <div class="form-group">
                            <label for="lg_username" class="sr-only">Username</label>
                            <input type="text" class="form-control" id="lg_username" name="username" placeholder="username"
                                   data-container="body" data-toggle="popover" data-placement="left" data-content=""
                                   value="">
                        </div>
                        <div class="form-group">
                            <label for="lg_password" class="sr-only">Password</label>
                            <input type="password" class="form-control" id="lg_password" name="password" placeholder="password" 
                                   data-container="body" data-toggle="popover" data-placement="left" data-content="">
                        </div>
                        <div class="form-group login-group-checkbox">
                            <input type="checkbox" id="lg_remember" name="lg_remember">
                            <label for="lg_remember">remember</label>
                        </div>
                    <button type="submit" class="login-button">Submit</button>
</form>

jQuery驗證工作正常。 我的規則是有效的。 如果我的規則輸入正確，它將把我發送到home.php。 我認為ajax代碼無法正常工作。

submitHandler: function() {
        var username = $('#lg_username').val();
            var password = $('#lg_password').val();
            var checkbox = $('#lg_remember').is(":checked");

            var strAjax = "username=" + username + "&password=" + password + "&checkbox=" + checkbox;
            $.ajax({
                type: 'POST',
                url: 'logDeneme.php',
                data: strAjax,
                cache: false,
                success: function(data) {
                    if(data) {
                        window.location.href = "home.php";
                    }
                    else {
                        //error message. but when this code run, always send to home page.
                    }
                }
            });
            return false;
            }

這部分工作正常。 它在index.php中不起作用。 我的問題是為什么以及如何處理！

Answer 1

問題1

您的表單是通過GET請求提交的，因為未調用JS（請參見下面的＃2），並且HTML可能這樣聲明：

<form action='log.php'>
[...]
</form>

您必須指定method='post'來提交POST數據。

問題2

除非您使用的是jQuery插件 ，否則表單沒有.validate事件。 您想使用.submit 。

最后，確保所有JavaScript都位於$(document).ready(function() { ... }); 否則將無法在正確的時間執行。 在Firefox / Chrome開發者控制台中查看，它是調試的救生員。