使用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

除非你使用a jQuery plugin存在的形式不.validate事件。你想使用.submit。

最后，请确保您的所有javascript都在$(document).ready(function() { ... });之内，否则它将无法在正确的时间执行。在Firefox/Chrome开发人员控制台中查看，这是调试的救星。