Question

在登录表单中给出以下文件。

如何让重定向在最后工作......标题（'location：somewhere ...'）不起作用。我想我必须做客户端。有人有想法吗？

我认为这将是jquery中的常见标准，但显然不是。

提前致谢

html表单：

<form method="post">
            <div>
                <label>Username: </label>
                <input id="username" class="entry" type="text" name="username" />
            </div>
            <div>
                <label>Password: </label>
                <input id="password" class="entry" type="password" name="password" />
            </div>
            <div class="submit">
                <input id="login" class="input" name="submit" value="Login" />
            </div>
            <a href="registration.php" id="register" class="link">
                <div class="buttongreen">
                    Register
                </div>
            </a>
            <a href="forgot.php" id="forgot" class="link2">
                <div class="buttongreen">
                    Forgot
                </div>
            </a>
        </form>

javascript

$(document).ready(function()
{

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

    $.post("ajaxLogin.php",{username: username, password: password }, function(result)
    {
        var content = $("#notificationContainer");
        content.fadeOut(400, function(){ $(this).html(result); });
        content.fadeIn(400).delay(15000).fadeOut(3000);
    }); 
});
});

以及信息来自的

<?php
if(isset($_POST['username']) || isset($_POST['password']))
{
$username   =   protect($_POST['username']);
$password   =   protect($_POST['password']);

if(!$username || !$password)
{
?>
    <div class="notification"> All the fields need to be completed! </div>
<?php
}
else
    {
      header('Location: http://somewhere.com/home');
    }
}
?>

/ * ** * 编辑添加 * ** * * /

我复制粘贴您的代码如下，我无法使其工作：

<html>
<head>
    <title>Test form</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function(){
          $('#login').click(function(){

            $.ajax({
              url: "ajaxLogin.php",
              data: {
                username: $('#username').val(), 
                password: $('#password').val() 
              },
              type: 'POST',
              dataType: 'json',
              success: function(data){
                if(data.response==1)
                    window.location.replace(data.redirecturl);
                else if(data.response==0){
                    var content = $('#notificationContainer').html('');
                    var notification = $('<div class="notification">' + data.error + '</div>');

                    content.fadeOut(400, function(){ 
                      $(this).append(notification).fadeIn(400).delay(15000).fadeOut(3000);
                    });
                }
              }
            });
          });
        });
</script>
<style>
    .notificationContainer
    {
        position: absolute;
        background-color: orange;
        width: 200px;
        height: 200px;
    }

    #login
    {
        cursor: default;
        background-color: green;
    }
</style>
</head>
<body>
    <form method="post">
            <div>
                <label>Username: </label>
                <input id="username" class="entry" type="text" name="username" />
            </div>
            <div>
                <label>Password: </label>
                <input id="password" class="entry" type="password" name="password" />
            </div>
            <div class="submit">
                <input id="login" class="input" name="submit" value="Login" />
            </div>
        </form>

        <div id="notificationContainer" class="notificationContainer">
        </div>
</body>
</html>

我复制粘贴了ajax文件：

<?php

$ret = array();

 if(isset($_POST['username']) || isset($_POST['password']))
    {
    $username   =   $_POST['username'];
    $password   =   $_POST['password'];

if(!$username || !$password )
{
   $ret['response'] = 0;
   $ret['error'] = 'Your Error Message';
}
else
{
   $ret['response'] = 1;
   $ret['redirecturl'] = 'http://www.google.com';
}
}
echo json_encode($ret);
?>

Answer 1

我会这样解决：

1）使Php文件发送回json数据：

<?php

$ret = array();

if(isset($_POST['username']) || isset($_POST['password']))
{
$username   =   protect($_POST['username']);
$password   =   protect($_POST['password']);

if(!$username || !$password )
{
   $ret['response'] = 0;
   $ret['error'] = 'Your Error Message';
}
else
{
   $ret['response'] = 1;
   $ret['redirecturl'] = 'http://yoursiteurl/home';
}
}
echo json_encode($ret);
?>

2）用ajax Jquery函数替换post函数并在客户端处理json响应：

$(document).ready(function()
{

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

    $.ajax({
        url: "ajaxLogin.php",
        data: {username: username, password: password },
        type: 'POST',
        dataType: 'json',
        success: function(data)
        {
            if(data.response==1){
                window.location.replace(data.redirecturl);
            }
            elseif(data.response==0){
                var content = $("#notificationContainer");
                content.html('');
                var notification = $('<div></div>');
                notification.addClass('notification');
                notification.html(data.error);
                content.fadeOut(400, function(){ $(this).append(notification); });
                content.fadeIn(400).delay(15000).fadeOut(3000);
            }
        }
    });
});
});

Answer 2

我同意法布里奇奥。只需对JS进行一些修改即可确保事件得到正确处理：

$(document).ready(function(){
  $('#login').click(function(){
    $.ajax({
      url: "ajaxLogin.php",
      data: {
        username: $('#username').val(), 
        password: $('#password').val() 
      },
      type: 'POST',
      dataType: 'json',
      success: function(data){
        if(data.response==1)
            window.location.replace(data.redirecturl);
        else if(data.response==0){
            var content = $('#notificationContainer').html('');
            var notification = $('<div class="notification">' + data.error + '</div>');

            content.fadeOut(400, function(){ 
              $(this).append(notification).fadeIn(400).delay(15000).fadeOut(3000);
            });
        }
      }
    });
  });
});

我基本上完成了一些性能调整，只是将内容上的第二个动画移动到了fadeOut回调中。

希望这有帮助！

Answer 3

您可以尝试替换

 header('Location: http://somewhere.com/home');

与

 echo "<meta http-equiv='refresh' content='0; url=http://somewhere.com/home'>";

Answer 4

我相信你最好以Json格式返回你的AJAX响应，如：

{"targetURL":"http://somewhere","content":""}

或

{"targetURL":"","content":"All the fields need to be completed!"}

在您的Javascript回调函数中，您想检查targetURL是否为空并使用javascript location.href = targetURL重定向

登录表单中的AJAX调用和重定向

4 个答案: