0

输入正确的用户名/密码后，会出现登录成功。我想在成功登录后重定向到不同的页面，但 window.location.href 不起作用。

索引.html

<form id="myFormlogin" action="login.php" method="POST">
    Email:
    <input type="text" name="usernamelogin" />
    <br />Password:
    <input type="password" name="passlogin" />
    <br />
    <button id="login">login</button>
</form>
<div id="ack"></div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="my_script.js"></script>

登录.php

<?php
include_once('db.php');

$username = mysql_real_escape_string($_POST["usernamelogin"]);
$password = mysql_real_escape_string(md5($_POST["passlogin"]));

$sql    = "SELECT * FROM registered_users WHERE username='$username' and password='$password'";
$result = mysql_query($sql);
if ($result) {
    echo "login success";
} else {
    echo "Wrong Username or Password";
}
?>

脚本.js

("#login").click( function() {

if( $("#usernamelogin").val() == "" || $("#passlogin").val() == "" )
      $("#ack").html("Username/Password are mandatory fields -- Please Enter.");
    else
          window.location.href = "http://jsfiddle.net/";
});
4

4 回答 4

2

使用id代替name

将您的代码更改为

Email: <input type="text" id="usernamelogin"/><br />
Password: <input type="password" id="passlogin"/><br />

代替

Email: <input type="text" name="usernamelogin"/><br />
Password: <input type="password" name="passlogin"/><br />

并用于return false防止默认操作

$("#login").click(function () {
    if ($("#usernamelogin").val() == "" || $("#passlogin").val() == "")
        $("#ack").html("Username/Password are mandatory fields -- Please Enter.");
    else 
        window.location.href = "http://www.google.com";
    return false;
});

演示：http: //jsfiddle.net/satpalsingh/SzhbM/

于 2013-08-21T08:38:20.440 回答
1

我怀疑表格可能正在提交。尝试阻止表单的默认操作。

$("#login").click( function(e) {
  e.preventDefault();
  if( $("#usernamelogin").val() == "" || $("#passlogin").val() == "" )
        $("#ack").html("Username/Password are mandatory fields -- Please Enter.");
  else
  window.location.href = "http://google.com";         

});
于 2013-08-21T08:38:20.097 回答
1

将代码包装在内部$(document).ready();和用户之间preventDefault，以便它只执行定义的代码。

例子

$("#login").click( function(e)
{
    e.preventDefault();

此外，您正在使用if( $("#usernamelogin").val() == "" || $("#passlogin").val() == "" )此代码，但您忘记分配ID给input字段。

这就是为什么 jQuery 无法找到这两个字段并停止进一步执行脚本的原因。

你可以在萤火虫中检查它。

评论代码响应

在index.html页面中进行了以下更改。

<form id="myFormlogin" action="login.php" method="POST">
    Email: <input type="text" id="usernamelogin" name="usernamelogin"/><br />
    Password: <input type="password" id="passlogin" name="passlogin"/><br />
    <button id="login">login</button>
</form>

我所做的是name attribute为input字段添加的。

用下面的代码替换你的 mys_script.js

$(function()
{
    $("#submit").click( function()
    {
        if( $("#username").val() == "" || $("#pass").val() == "" )
        {
            $("#ack").html("Username/Password are mandatory fields -- Please Enter.");
        }
        else
        {
            $.ajax({
                url         :   $('#myForm').attr('action'),
                data        :   $('#myForm').serialize(),
                success     :   function(info)
                {
                    $("#ack").empty();
                    $("#ack").html(info);
                    clear();
                }
            });
        }
    });

    function clear()
    {
        $("form :input").each( function() {
            $(this).val("");
        });
    }

    $("#login").click( function()
    {
        if( $("#usernamelogin").val() == "" || $("#passlogin").val() == "" )
        {
            $("#ack").html("Username/Password are mandatory fields -- Please Enter.");
        }
        else
        {
            $.ajax({
                url         :   $('#myFormlogin').attr('action'),
                data        :   $('#myFormlogin').serialize(),
                success     :   function(info)
                {
                    $("#ack").empty();
                    $("#ack").html(info);
                    clear();
                }
            });
        }
    });
});

最后在您的login.php文件中进行如下更改，

<?php
include_once('db.php');
$username = mysql_real_escape_string( $_POST["usernamelogin"] );
$password = mysql_real_escape_string( md5($_POST["passlogin"]) );

$sql="SELECT * FROM registered_users WHERE username='$username' and password='$password'";
$result=mysql_query($sql)or die(mysql_error());   
$count = mysql_num_rows($result);


if($count==1)
{
    echo "found user";
}
else
{
    echo "Wrong Username or Password";
}
?>
于 2013-08-21T08:41:54.333 回答
1

首先使用ID选择器而不是name. 所以在两个输入中添加 ID：

Email: <input type="text" name="usernamelogin" id="usernamelogin"/><br />
Password: <input type="password" name="passlogin" id="passlogin"/><br />

然后将功能更改为：

$(document).ready(function(){
    $("#login").click( function() {
        if( $("#usernamelogin").val() == "" || $("#passlogin").val() == "" )
            $("#ack").html("Username/Password are mandatory fields -- Please Enter.");
            return false;
        else
            window.location.href = "http://google.com";         
            return false;
    });
});

并设置return false将阻止默认操作。

于 2013-08-21T08:46:49.510 回答