Javascript 使用SpringMVC在单击按钮时获取异步视图数据_Javascript_Java_Spring Mvc_Jsp

Javascript 使用SpringMVC在单击按钮时获取异步视图数据

javascript java spring-mvc jsp

Javascript 使用SpringMVC在单击按钮时获取异步视图数据,javascript,java,spring-mvc,jsp,Javascript,Java,Spring Mvc,Jsp,我正在使用SpringMVC制作一个web应用程序，但我被困在这里了。我在WEB-INF文件夹中有一个页面login.jsp，我有三种类型的查询字符串与此视图关联 “login.fin？cmdAction=selectLogin”->这将显示两个按钮->管理员登录和学员登录单击管理员登录按钮，页面应转到“Login.fin？cmdAction=adminLogin”，该页面将显示管理员登录页面单击“学员登录”按钮，应转到“login.fin？cmdAction=traineeLogin”，

我正在使用SpringMVC制作一个web应用程序，但我被困在这里了。我在WEB-INF文件夹中有一个页面login.jsp，我有三种类型的查询字符串与此视图关联

“login.fin？cmdAction=selectLogin”->这将显示两个按钮->管理员登录和学员登录

单击管理员登录按钮，页面应转到“Login.fin？cmdAction=adminLogin”，该页面将显示管理员登录页面

单击“学员登录”按钮，应转到“login.fin？cmdAction=traineeLogin”，显示学员登录页面

这是我的登录控制器：

package com.finlogic.loginapps.login.apps;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.servlet.mvc.multiaction.MultiActionController;

public class LoginController extends MultiActionController {

public ModelAndView selectLogin(HttpServletRequest request, HttpServletResponse response)
    {
        ModelAndView modelAndView = new ModelAndView("login");
        modelAndView.addObject("title", "Select Login");
        return modelAndView;
    }
public ModelAndView adminLogin(HttpServletRequest request, HttpServletResponse response)
    {
        ModelAndView modelAndView = new ModelAndView("login");
        modelAndView.addObject("title", "Admin");
        return modelAndView;
    }
    public ModelAndView traineeLogin(HttpServletRequest request, HttpServletResponse response)
    {
        ModelAndView modelAndView = new ModelAndView("login");
        modelAndView.addObject("title", "Trainee");
        return modelAndView;
    }

}

这是我的login.jsp：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>${title} Login Page</title>
    <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="js/login.js">
</head>
<body>
<div id="container"></div>
<div class="limiter">
        <div class="container-login100" style="background-image: url('images/bg-01.jpg');">
    <div class="wrap-login100">
        <c:if test="${title eq 'Select Login'}">

                <span class="login100-form-logo">
                    <i class="zmdi zmdi-landscape"></i>
                </span>

                <span class="login100-form-title p-b-34 p-t-27" >
                        Select:
                </span>
                <div class="container-login100-form-btn">
                    <button class="login100-form-btn" id="adminloginselect" onclick="adminLoader()">
                            Admin Login
                    </button>
                </div><br/>
                <div class="container-login100-form-btn">
                    <button class="login100-form-btn" id="traineeloginselect" onclick="traineeLoader()">
                        Trainee Login
                    </button>
                </div>
        </c:if>
        <c:if test="${title eq 'Admin'}">
            <form class="login100-form validate-form">
                <span class="login100-form-logo">
                    <i class="zmdi zmdi-landscape"></i>
                </span>

                <span class="login100-form-title p-b-34 p-t-27">
                    Admin Log in:
                </span>

                <div class="wrap-input100 validate-input" data-validate = "Enter username">
                    <input class="input100" type="text" name="adminusername" placeholder="Admin Username">
                    <span class="focus-input100" data-placeholder="&#xf207;"></span>
                </div>

                <div class="wrap-input100 validate-input" data-validate="Enter password">
                    <input class="input100" type="password" name="adminpass" placeholder="Admin Password">
                    <span class="focus-input100" data-placeholder="&#xf191;"></span>
                </div>

                <div class="contact100-form-checkbox">
                    <input class="input-checkbox100" id="ckb1" type="checkbox" name="remember-me">
                    <label class="label-checkbox100" for="ckb1">
                        Remember me
                    </label>
                </div>

                <div class="container-login100-form-btn">
                    <button class="login100-form-btn">
                        Login
                    </button>
                </div>

                <div class="text-center p-t-90">
                    <a class="txt1" href="#">
                        Forgot Password?
                    </a>
                </div>
            </form>
            </c:if>
        <c:if test="${title eq 'Trainee'}">
            <form class="login100-form validate-form">
                <span class="login100-form-logo">
                    <i class="zmdi zmdi-landscape"></i>
                </span>

                <span class="login100-form-title p-b-34 p-t-27">
                    Log in
                </span>

                <div class="wrap-input100 validate-input" data-validate = "Enter username">
                    <input class="input100" type="text" name="traineeusername" placeholder="Trainee Username">
                    <span class="focus-input100" data-placeholder="&#xf207;"></span>
                </div>

                <div class="wrap-input100 validate-input" data-validate="Enter password">
                    <input class="input100" type="password" name="traineepass" placeholder="Trainee Password">
                    <span class="focus-input100" data-placeholder="&#xf191;"></span>
                </div>

                <div class="contact100-form-checkbox">
                    <input class="input-checkbox100" id="ckb1" type="checkbox" name="remember-me">
                    <label class="label-checkbox100" for="ckb1">
                        Remember me
                    </label>
                </div>

                <div class="container-login100-form-btn">
                    <button class="login100-form-btn">
                        Login
                    </button>
                </div>

                <div class="text-center p-t-90">
                    <a class="txt1" href="#">
                        Forgot Password?
                    </a>
                </div>
            </form></c:if>

            </div>
        </div>
    </div>


    <div id="dropDownSelect1"></div>
</body>
</html>

当我点击管理员登录时，点击后什么也没发生。请帮帮我。

将datsourc修复为datsourc 将js代码更改为以下代码：

function adminLoader()
{
   function adminLoader('login.fin','adminLogin','container')
}
function traineeLoader()
{
    getSynchronousData('login.fin','traineeLogin','container');
}
function getSynchronousData(datSource,val,destination)
{
    var obj=document.getElementById(destination);
    if(window.XMLHttpRequest)
            {
        xmlhttp=new XMLHttpRequestObject();
            }
    else if(window.ActiveXObject)
        {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
          {
            obj.innerHTML=XMLHttpRequestObject.responseText;
          }
        else
          {
                obj.innerHTML=varProblem;
          }
    }
    var params = "cmdAction=" + val;
    xmlhttp.open("POST",datSource,true);
    xmlhttp.send(params);
    obj.innerHTML=varLoading; //<----why?
}

函数adminLoader（）
{
函数adminLoader（'login.fin'、'adminLogin'、'container'）
}
函数培训生加载器（）
{
getSynchronousData（'login.fin'，'traineeLogin'，'container'）；
}
函数getSynchronousData（数据源、val、目标）
{
var obj=document.getElementById（目的地）；
if（window.XMLHttpRequest）
{
xmlhttp=新的XMLHttpRequestObject（）；
}
else if（window.ActiveXObject）
{
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
xmlhttp.onreadystatechange=函数（）
{
if（xmlhttp.readyState==4&&xmlhttp.status==200）
{
obj.innerHTML=XMLHttpRequestObject.responseText；
}
其他的
{
obj.innerHTML=varProblem；
}
}
var params=“cmdAction=“+val；
open（“POST”，datSource，true）；
xmlhttp.send（params）；
obj.innerHTML=varLoading；//如果chrome在adminLoader的getSynchronousData（login.fin？cmdAction=selectLogin:34未捕获引用错误：XMLHttpRequestObject未在getSynchronousData（login.fin？cmdAction=selectLogin:34）中定义，请键入ctrl+shit+I并查看是否存在任何指示错误（login.fin？cmdAction=selectLogin:23）在HTMLButtonElement.onclick（login.fin？cmdAction=selectLogin:73）我得到了这个。我编辑了代码，尝试了一下，抱歉没有注意到你。我编辑了javascript，但还是出现了相同的错误。
function adminLoader()
{
   function adminLoader('login.fin','adminLogin','container')
}
function traineeLoader()
{
    getSynchronousData('login.fin','traineeLogin','container');
}
function getSynchronousData(datSource,val,destination)
{
    var obj=document.getElementById(destination);
    if(window.XMLHttpRequest)
            {
        xmlhttp=new XMLHttpRequestObject();
            }
    else if(window.ActiveXObject)
        {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
          {
            obj.innerHTML=XMLHttpRequestObject.responseText;
          }
        else
          {
                obj.innerHTML=varProblem;
          }
    }
    var params = "cmdAction=" + val;
    xmlhttp.open("POST",datSource,true);
    xmlhttp.send(params);
    obj.innerHTML=varLoading; //<----why?
}