Question

输入正确的用户名/密码后，将显示登录成功。我想在成功登录后重定向到不同的页面，但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/";
});

Answer 1

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

Answer 2

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

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

});

Answer 3

在$(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"; } ?>

Answer 4

首先使用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以阻止默认操作。

Javascript window.location.href重定向无法正常工作

4 个答案: