输入 REST Web 服务 URL 时切换 JavaScript 功能答案

【问题标题】：Toggle JavaScript function when entering rest webservices URL输入 REST Web 服务 URL 时切换 JavaScript 功能
【发布时间】：2016-06-14 14:21:46
【问题描述】：

我在同一页面中有两个表单，单击图标时会出现一个，登录消失并出现注册。我正在使用spring mvc，所以我想在输入/注册切换表单工作的功能时。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>Login Form</title>

    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"
          href="../static/css/reset.css"/>

    <link rel='stylesheet prefetch'
          href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900|RobotoDraft:400,100,300,500,700,900'/>
    <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'/>

    <!--<link rel="stylesheet" href="../static/css/style.css"/>-->
    <link rel="stylesheet" th:href="@{/css/style.css}"
          href="../static/css/style.css"/>


</head>

<body>


<!-- Mixins-->
<!-- Pen Title-->

<div class="container">
    <div class="card"></div>
    <div class="card">
        <h1 class="title">Login</h1>
        <form action="login" th:action="@{/login}" th:object="${login}" method="post" >
            <div class="input-container">
                <input type="email" id="email" th:field="*{email}"  required="required"/>
                <label for="email">email</label>
                <div class="bar"></div>
            </div>
            <div class="input-container">
                <input type="password" id="Password" th:field="*{password}"  required="required"/>
                <label for="Password">Password</label>
                <div class="bar"></div>
            </div>
            <div class="button-container">
                <button  type="submit" name="action" value="login"><span>Go</span></button>
            </div>
            <div class="footer"><a href="#">Forgot your password?</a></div>
        </form>
    </div>
    <div class="card alt">
        <div class="toggle"></div>
        <h1 class="title">Register
            <div class="close"></div>
        </h1>
        <form action="register" th:action="@{/register}" th:object="${register}" method="post">
            <div class="input-container">
                <input type="text" id="firstName" th:field="*{firstName}" required="required"/>
                <label for="firstName">First Name</label>
                <div class="bar"></div>
            </div>

            <div class="input-container">
                <input type="text" id="lastName" th:field="*{lastName}" required="required"/>
                <label for="lastName">Last Name</label>
                <div class="bar"></div>
            </div>

            <div class="input-container">
                <input type="email" id="email_" th:field="*{email}" required="required"/>
                <label for="email">Email</label>
                <div class="bar"></div>
            </div>
            <div class="input-container">
                <input type="password" id="Password_" th:field="*{password}" required="required"/>
                <label for="Password">Password</label>
                <div class="bar"></div>
            </div>
            <div class="button-container">
                <button  type="submit" name="action" value="register"><span>Next</span></button>
            </div>
        </form>
    </div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

<script th:src="@{/js/index.js}"></script>


</body>
</html>

JavaScript 代码：

$('.toggle').on('click', function() {
  $('.container').stop().addClass('active');
});

$('.close').on('click', function() {
  $('.container').stop().removeClass('active');
});

例如，我想在输入 /register 时检索注册表而不是登录

【问题讨论】：

GitHub 上的示例项目可以帮助我们理解问题。
好的，我已经在问题中添加了代码:)
我看到两种使用不同动作端点的表单。登录表单使用“/login”端点。注册表格使用“/register”端点。这应该工作得很好。你有什么具体问题？需要在 GitHub 上提供一个完整的示例。

标签： javascript spring-mvc spring-boot thymeleaf

【解决方案1】：

一种方法是创建一个 /register 控制器，该控制器将返回一个参数：

@RequestMapping("/register") 
public ModelAndView register() {
   ModelAndView mv = new ModelAndView("your_form_page")
   mv.addObject("isRegister", true);
   return mv;
}

然后您可以添加一个隐藏字段并在 javascript 中使用它来切换 div：

<!DOCTYPE html>
<html
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
    xmlns:th="http://www.thymeleaf.org">

    <head>
        <!-- imports omitted -->
        <script type="text/javascript">
            $(document).ready(function () {
                if ($("#isRegister").val()) {
                    $("#register").show();
                    $("#signUp").hide();
                } else {
                    $("#register").hide();
                    $("#signUp").show();
                }
            });
        </script>


    </head>

    <body>
        <input id="isRegister" type="hidden" th:value="${isRegister}" disabled="disabled"/>


        <div id="signUp">
            Sign Up Form
        </div>
        <div id="register">
            Register Form
        </div>

    </body>
</html>

当然，您可以将 Javascript 代码段移动到您的“.js”文件中。这里重要的是要有隐藏的输入字段，可以在 Javascript 中访问以切换 DIV。

【讨论】：