Question

我使用jquery登录后端网页。

这是表格：

<form method="post" action="#" autocomplete='off'>

    <h1 class="white-text">ADMIN Log in</h1>
    <div class="row"><div id="errMsg"></div></div>
    <div class="row">
        <div class="large-12"><input type="text" placeholder="User ID" name="txtUsername" id="txtUsername"></div>
    </div>
    <div class="row">
        <div class="large-12"><input type="password" placeholder="Password" name="txtPassword" id="txtPassword"></div>
    </div>
    <div class="row">
        <div class="large-12 columns">
            <p><a href="#"  data-reveal-id="myModal">Need Help Signing in?</a></p>
        </div>
    </div>
    <div class="large-12 columns ">
        <input type="submit" value="Sign In" class="button right" onclick="validLogin()"> 
    </div>                
</form>

这是处理登录的jQuery：

function validLogin(){

      var username=$('#txtUsername').val();
      var password=$('#txtPassword').val();

      var dataString = 'username='+ username + '&password='+ password;

      $("#errMsg").hide();
      $.ajax({
      type: "POST",
      url: "processed.php",
      data: dataString,
      cache: false,
      success: function(result){
               var result=trim(result);
               if(result=='admin'){
                     window.location='admin.php';
               }else if(result=='Invalid ID or password!') {
                     $("#errMsg").show(100);                           
                     $("#errMsg").html("LOGIN FAILED!: " + result);                           
               }else{
                      $("#errMsg").fadeIn(100);                              
                      $("#errMsg").html(result);                            
               }
      }
      });
}

这里是来自jquery网址的php文件：

<?php
session_start();
include('include/connection.php');

$message=array();
if(isset($_POST['username']) && !empty($_POST['username'])){
    $username=$_POST['username'];
}else{
    $message[]='<i class="foundicon-error"></i> username';

}

if(isset($_POST['password']) && !empty($_POST['password'])){
    $password=stripslashes($_POST['password']);
}else{
    $message[]='<i class="foundicon-error"></i> password';

}

$countError=count($message);

if($countError > 0){
    echo "Please enter your ";
     for($i=0;$i<$countError;$i++){
                if ($i > 0){ 
                    $con=" and "; 
                }else { 
                    $con=""; 
                }
              echo $con.$message[$i];
     }

}else{
    $query="select * from admin_users where username='$username' and password='$password'";
    $res = mysqli_query($connect,$query);
    while($row = mysqli_fetch_assoc($res))
        {
            $userlvl = $row['user_level'];
        }
    $checkUser=mysqli_num_rows($res);
    if($checkUser > 0){
         $_SESSION['LOGIN_STATUS']=true;

         $_SESSION['uname']=$username;
         if ($userlvl == 1) {
            echo 'admin';
         }
         else {
            echo 'techadmin';
         }

    }else{
        echo "Invalid ID or password!";
    }

}
?>

我不知道为什么这些代码不能在firefox上运行，但它在chrome，IE，opera和safari上完美运行..

它没有进入打算去的页面......它只是停留在登录页面上......没有错误返回或者任何错误...而且，没有错误日志控制台

Answer 1

function validLogin(){
   event.preventDefault();
   ^

事件未定义，导致javascript中止。

还要检查开发人员控制台，F12键，或安装Firefox插件FireBug并查看控制台说的内容。

修改

你确定jQuery已启用吗？你可以用完整的场景为这个案例发布一个jsfiddle吗？

检查控制台以查看javascript错误，也许你在某处有解析错误，开发人员控制台会帮助。

<强> EDIT2

更改表格

<form method="post" onsubmit="return validLogin();" action="#" autocomplete='off'> ..... <div class="large-12 columns "> <input type="submit" value="Sign In" class="button right"> </div> </form>

和Js：

function validLogin(){ var username=$('#tx.... ..... ..... return false; // at the end }

jsfiddle ：http://jsfiddle.net/9kcx9/

Answer 2

这应该可以解决您的问题。首先给form一个id：

<form method="post" action="#" autocomplete="off" id="myform">

    <h1 class="white-text">ADMIN Log in</h1>
    <div class="row"><div id="errMsg"></div></div>
    <div class="row">
        <div class="large-12"><input type="text" placeholder="User ID" name="txtUsername" id="txtUsername"></div>
    </div>
    <div class="row">
        <div class="large-12"><input type="password" placeholder="Password" name="txtPassword" id="txtPassword"></div>
    </div>
    <div class="row">
        <div class="large-12 columns">
            <p><a href="#"  data-reveal-id="myModal">Need Help Signing in?</a></p>
        </div>
    </div>
    <div class="large-12 columns ">
        <input type="submit" value="Sign In" class="button right"> 
    </div>                
</form>

validLogin会传递一个事件，使用evt作为参数捕获它，使用evt.preventDefault( )和return false;（最后）来阻止默认的提交操作。获取表单元素并设置onsubmit=validLogin。

function validLogin(evt){
      evt.preventDefault( );
      var username=$('#txtUsername').val();
      var password=$('#txtPassword').val();

      var dataString = 'username='+ username + '&password='+ password;

      $("#errMsg").hide();
      $.ajax({
      type: "POST",
      url: "processed.php",
      data: dataString,
      cache: false,
      success: function(result){
               var result=trim(result);
               if(result=='admin'){
                     window.location='admin.php';
               }else if(result=='Invalid ID or password!') {
                     $("#errMsg").show(100);                           
                     $("#errMsg").html("LOGIN FAILED!: " + result);                           
               }else{
                      $("#errMsg").fadeIn(100);                              
                      $("#errMsg").html(result);                            
               }
      }
      });
      return false;
}
document.getElementById("myform").onsubmit = validLogin;

测试here，适用于firefox和chrome（打开jsbin控制台以查看其工作情况）

登录功能在Firefox中不起作用，但适用于chrome，IE，safari和opera

2 个答案: