个人中心
gpt4 book ai didi

javascript - 使用 AJAX 的 Bootstrap 模式登录

转载 作者：行者123 更新时间：2023-11-28 15:19:06 25 4
gpt4 key购买 nike

我正在开发一个网站，我已将 Bootstrap 的模式组件实现为登录表单。

我的登录脚本工作正常(在没有模式的情况下进行测试)，但是，它显然无法显示错误，因为模式在显示任何错误之前关闭。显示错误的最佳选择是使用 AJAX。我尝试在其中实现 AJAX ，但似乎失败得很惨(这不是我熟悉的东西)。

这是我迄今为止尝试过的代码:

index.php

    <script type="text/javascript">

function login(username, password, callback) {
    var xhr = new XMLHttpRequest();

    xhr.open("POST", "login.php", true);
    xhr.responseType = "json";
    xhr.onload = function() {
        var data = xhr.response;

        if (data["status"] === "failure") {
            callback({
                "errorCode": data["errorCode"],
                "errorMessage": data["errorMessage"]
            });
        } else {
            callback(null, data["redirect"]);
            $("#error").append(errorMessage);
        }
    };
    xhr.send(JSON.stringify({
        "username": username,
        "password": password
    });
}
</script>

---//---

    <div id="loginModal" class="modal fade" role="dialog">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
                        <div class="loginForm">
                        <div id="error"></div>
                    <form id="login" action="index.php" method="post">
                        <div class="input-container">
                            <label for="username">Email or Username</label>
                            <input type="text" name="username" required class="form-control"/>
                        </div>
                        <div class="input-container">
                            <label for="password">Password</label>
                            <input type="password" name="password" required class="form-control"/>
                        </div>
                        <div class="input-container">
                            <input type="checkbox" name="remember" value="true" id="remember" />
                            <label for="remember">Remember me</label>
                        </div>
                        <div class="submit-container">
                            <button type="submit" class="btn btn-primary btn-login">SIGN IN</button>
                        </div>
                    </form>
                </div>  
        <h2><span>or</span></h2>    
        <div class="social-signin">
            <a href="#" class="facebook">Sign in with Facebook</a>
            <a href="#" class="google">Sign in with Google+</a>
        </div>
      </div>
      <div class="modal-footer">
        <p>Need an account? <a href="sign-up">Sign up here.</a></p>
      </div>
    </div>

  </div>
</div>

login.php

---//---

 login_complete($user_id);

    $output = [];

    $output["status"] = "success";

    echo json_encode($output);
    exit;
} else {
    echo json_encode(array("status" => "failure", "errorCode": $result[0], "errorMessage": $ERRORMSGS[$result[0]]));
}

我的问题是，如何在 Bootstrap 模式登录表单中正确实现 AJAX 才能成功显示错误消息(例如“用户名和/或密码不正确”)？目前，没有显示任何错误，并且用户未经过身份验证(它只是返回到index.php)。

非常感谢任何帮助。

最佳答案

这里有一些可以帮助您入门的东西:这基本上是我使用的，并且与您所拥有的非常相似。它使用 ajax 将表单发送到 login.php，后者返回 json 响应。神奇的事情发生在 login.html 中，而且非常简单:只需将 messages div 添加到模式中，然后使用 jQuery 定位它以添加消息和适当的 Bootstrap 警报类。

login.html

<!DOCTYPE html>
    <html>
    <head>
        <title>Login</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
        <!--[if lt IE 9]>
            <script src="//oss.maxcdn.com/libs/html5shiv/r29/html5.min.js"></script>
            <script src="//oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>

        <div class="container">
            <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">Login</button>

            <div class="modal fade" id="myModal">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <form id="form" role="form">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                                <h4 class="modal-title">Login</h4>
                            </div>
                            <div class="modal-body">
                                <div id="messages"></div>
                                YOUR FORM ELEMENTS HERE
                            Username: <input type="text" name="username">
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                <button type="submit" class="btn btn-primary">Login</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

        </div>

        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <script>
            $('#form').submit(function(e) {

                var form = $(this);
                var formdata = false;
                if(window.FormData){
                    formdata = new FormData(form[0]);
                }

                var formAction = form.attr('action');

                $.ajax({
                    type        : 'POST',
                    url         : 'login.php',
                    cache       : false,
                    data        : formdata ? formdata : form.serialize(),
                    contentType : false,
                    processData : false,
                    dataType: 'json',

                    success: function(response) {
                        //TARGET THE MESSAGES DIV IN THE MODAL
                        if(response.type == 'success') {
                            $('#messages').addClass('alert alert-success').text(response.message);
                        } else {
                            $('#messages').addClass('alert alert-danger').text(response.message);
                        }
                    }
                });
                e.preventDefault();
            });
        </script>
    </body>
</html>

login.php

<?php

$success = true;

if($success == true) {
    $output = json_encode(array('type'=>'success', 'message' => 'YAY'));
} else {
    $output = json_encode(array('type'=>'error', 'message' => 'WHOOPS'));
}

die($output);

关于javascript - 使用 AJAX 的 Bootstrap 模式登录，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32285593/

25 4 0
文章推荐： html - CSS 覆盖 DIV.class border-top
文章推荐： ios - Swift - Firebase 数据库查询项目范围
文章推荐： html - 用于更改内容数量的网格布局自动高度
文章推荐： javascript - 循环遍历数组并延迟函数
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com