使用jquery和php的简单登录表单

时间:2015-01-06 06:04:39

标签: javascript php jquery

我从http://www.formget.com/jquery-login-form/获得了一些代码并实现了它。

以下显示在jquery文件中。

    $(document).ready(function()
 {

 $("#login").click(function()
 { 
    var username = $("#username").val();
    var password = $("#password").val();


  // Checking for blank fields.

    if( username =='' || password =='')
    {
        $('input[type="text"],input[type="password"]').css("border","2px solid red");
        $('input[type="text"],input[type="password"]').css("box-shadow","0 0 3px red");
        alert("Please fill all fields...!!!!!!");
    }

    else    
    {

        $.post("login.php",{ username1:username, password1:password},
        function(data) 
        {
            if(data=='Invalid Email.......')    
            {
                $('input[type="text"]').css({"border":"2px solid red","box-shadow":"0 0 3px red"});
                $('input[type="password"]').css({"border":"2px solid #00F5FF","box-shadow":"0 0 5px #00F5FF"});
                alert(data);
            }

        else if(data=='Email or Password is wrong...!!!!')
            {
                $('input[type="text"],input[type="password"]').css({"border":"2px solid red","box-shadow":"0 0 3px red"});
                alert(data);
            } 
        else if(data=='Successfully Logged in...'){
                        $("form")[0].reset();

   $('input[type="text"],input[type="password"]').css({"border":"2px solid #00F5FF","box- shadow":"0 0 5px #00F5FF"});
  alert(data);
  } else{
  alert(data);
  }
  }); 
  }
  });
  });

php代码如下所示。

     <?php
        $connection = mysql_connect("localhost", "root", "12345"); // Establishing connection with server..
        $db = mysql_select_db("deve2pro", $connection); // Selecting Database.
        $username=$_POST['username1']; // Fetching Values from URL.
        $password= sha1($_POST['password1']); // Password Encryption, If you like you can also leave sha1.
        // check if e-mail address syntax is valid or not
        $username = filter_var($username, FILTER_SANITIZE_EMAIL); // sanitizing email(Remove unexpected symbol like <,>,?,#,!, etc.)
        if (!filter_var($username, FILTER_VALIDATE_EMAIL)){
        echo "Invalid username.......";
        }else{
        // Matching user input email and password with stored email and password in database.
        $result = mysql_query("SELECT * FROM e2pro_user WHERE User_email='$username' AND User_password='$password'");
        $data = mysql_num_rows($result);
        if($data==1){
        echo "Successfully Logged in...";
        }else{
        echo "Username or Password is wrong...!!!!";
        }
        }
        mysql_close ($connection); // Connection Closed.
        ?>

现在出现的问题是代码没有从jquery重定向到 php 页面。很高兴帮助。

1 个答案:

答案 0 :(得分:1)

只需将您的jquery代码更改为我的代码:

<script>
$(document).ready(function()
{
$("#login").click(function()
{ alert("wao");
var username = $("#username").val();
var password = $("#password").val();
 // Checking for blank fields.
if( username =='' || password =='')
{
    $('input[type="text"],input[type="password"]').css("border","2px solid red");
    $('input[type="text"],input[type="password"]').css("box-shadow","0 0 3px red");
    alert("Please fill all fields...!!!!!!");
}

else    
{
$.ajax({
type: "POST",
url: "http://localhost/testerpage.php",
data:{"Username":username,"Password":password},
success: function(data) {
if(data=='Invalid Email.......')    
        {
            $('input[type="text"]').css({"border":"2px solid red","box-shadow":"0 0 3px red"});
            $('input[type="password"]').css({"border":"2px solid #00F5FF","box-shadow":"0 0 5px #00F5FF"});
            alert(data);
        }

    else if(data=='Email or Password is wrong...!!!!')
        {
            $('input[type="text"],input[type="password"]').css({"border":"2px solid red","box-shadow":"0 0 3px red"});
            alert(data);
        } 
    else if(data=='Successfully Logged in...'){
                    $("form")[0].reset();

    $('input[type="text"],input[type="password"]').css({"border":"2px solid #00F5FF","box- shadow":"0 0 5px #00F5FF"});
    alert(data);
    } else{
    alert(data);
    }
    }
    });
     }
    });
    });
  </script>