Javascript window.location.href重定向不起作用

Javascript window.location.href redirection not working

本文关键字：重定向 不起作用 href location window Javascript      更新时间：2023-09-26

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

index.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>

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);
if ($result) {
    echo "login success";
} else {
    echo "Wrong Username or Password";
}
?>

script.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/";
});

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

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

$("#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";         
});

首先使用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。

将代码包装在$(document).ready();和用户preventDefault中，这样它将只执行定义的代码。

示例

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

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

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

你可以在firebug中查看。

注释代码响应

在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>

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

用以下代码替换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";
}
?>
相关文章：