javascript - 如何为单页 jQuery 登录、注册和忘记密码表单适当更改 url

Question

我正在使用 CodeIgniter、jQuery 等开发一个应用程序。它有一个页面，其中有 3 个表单用于登录、注册和忘记密码。所有这些都位于一个页面中。

默认显示登录页面(登录表单)，单击“注册”后，将显示注册表单而无需重新加载。我通过在 View 中为每个表单制作不同的部分然后使用 jquery 调用该部分来实现此目的，这使注册表单显示和隐藏登录表单，并且有一个后退按钮可以让我返回登录页面。

代码是:

    jQuery('#register-form').click(function () {
            jQuery('.login-form').hide();
            jQuery('.forget-form').show();
        });

        jQuery('#back-btn').click(function () {
            jQuery('.login-form').show();
            jQuery('.forget-form').hide();
        });

我想知道如何使 url 正常运行，以便我可以通过访问它的 url 来访问每个表单。

例如，example.com/#register-form 会直接带我到我的注册表格，同样通过单击后退按钮，我的 url 应该像 getbootstrap.com 一样适本地改变工作。忘记密码也是如此。

我尝试了 jquery-hashchange 插件，但无法弄清楚具体方法。任何人都可以告诉我在没有任何插件帮助的情况下完成此任务的正确方法吗？如果必须使用插件，请推荐一个。

Answer 1

好的，如果我对您的理解是正确的，您希望根据按钮点击或使用散列标记的 URL 本身动态显示或隐藏正确的表单。而且，如果可能的话，您不希望借助插件。

假设我正确理解了这一点，那么下面的代码可能与您正在寻找的内容一致。请注意，我没有在示例中放置所有错误处理等，但我相信这里有足够的内容可以帮助您“启动”您正在寻找的方向。

一些初始的 jquery/javascripting 来设置一切。

            var urlHref = window.location.href;
        var urlHostName = window.location.hostname;
        var urlPathName = window.location.pathname;
        var urlHashParam = urlHref.split("#");

        $(document).ready(function() {
            $("#hostName").html(urlHostName);
            $("#pathName").html(urlPathName);
            $("#hostHref").html(urlHref);
            $("#hashTag").html(urlHashParam[1]);

            switch(urlHashParam[1]) {
                case "register":
                    manageForms("register");
                    break;
                case "forgot":
                    manageForms("forgot");
                    break;
                default:
                    manageForms("login");
            }

            $('#btnRegister').click(function() {
                manageForms("register");
            });

            $('#btnLogin').click(function() {
                manageForms("login");
            });

            $('#btnForgot').click(function() {
                manageForms("forgot");
            });

        });

        function manageForms(visibleForm) {
            $("#login").hide();
            $("#register").hide();
            $("#forgot").hide();

            $("#" + visibleForm).show();

            if (history.pushState) {
                // only works if the browser supports pushState.
                window.history.pushState("test", "Title", urlPathName + "#" + visibleForm);
            }

        }

基本上我们在这里所做的是获取 windows.login 的不同属性，以便我们可以获得我们正在寻找的值。

我们在切换期间默认使用登录表单(因为如果 url 中没有请求散列标签或请求的散列标签未知，您首先需要那个)

您还要求在不重新加载表单的情况下动态修改 URL(如果通过单击按钮选择，则使用新标记)。这在现代浏览器中是可能的，但在旧浏览器中则不然。这是由

                if (history.pushState) {
                // only works if the browser supports pushState.
                window.history.pushState("test", "Title", urlPathName + "#" + visibleForm);
            }

因为并非所有浏览器都支持它，所以在使用该命令之前会快速检查是否支持。

最后是此代码测试的 HTML 部分。

        HREF: <span id="hostHref"></span>
    <br>
    Host Name: <span id="hostName"></span>
    <br>
    Path Name: <span id="pathName"></span>
    <br>
    Hash Tag Parameters: <span id="hashTag"></span>
    <br>

    <hr>
    <input type="button" id="btnLogin" value="Login">
    <input type="button" id="btnRegister" value="Register for Access">
    <input type="button" id="btnForgot" value="Forgot Password">
    <hr>
    <div id="login">
        This is the Login Section
    </div>
    <div id="register">
        This is the Register Section
    </div>
    <div id="forgot">
        This is the forgot password section
    </div>

希望至少其中的一些内容有所帮助。