使用spring mvc获取按钮单击时的异步视图数据
使用spring mvc获取按钮单击时的异步视图数据
提问于 2018-06-11 00:09:15
我正在用spring mvc做一个web应用程序，但是我被困在这里了。我在WEB-INF文件夹中有一个页面login.jsp，并且有三种类型的查询字符串与此视图相关联。
"login.fin?cmdAction=selectLogin“->这将显示两个按钮->管理员登录和受训人员登录。
在管理员登录按钮的点击，该页面应转到"login.fin?cmdAction=adminLogin"，其中将显示管理员登录页面。
并在单击受训人员登录按钮，它应该转到"login.fin?cmdAction=traineeLogin"，其中将显示受训人员登录页面。
这是我的loginController：
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=""></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=""></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=""></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=""></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>上面页面的JavaScript是login.js
function adminLoader()
{
getSynchronousData('login.fin?cmdAction=adminLogin','','container');
}
function traineeLoader()
{
getSynchronousData('login.fin?cmdAction=traineeLogin','','container');
}
function getSynchronousData(datSource,params,destination)
{
var XMLHttpRequestObject=false;
if(window.XMLHttpRequest)
{
XMLHttpRequestObject=new XMLHttpRequestObject();
}
else if(window.ActiveXObject)
{
XMLHttpRequestObject=new ActiveXObject("Microsoft.XMLHTTP");
}
if(XMLHttpRequestObject)
{
var obj=document.getElementById(destination);
obj.innerHTML=varLoading;
XMLHttpRequestObject.open("POST",datSource,false);
XMLHttpRequestObject.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
XMLHttpRequestObject.send(params);
if(XMLHttpRequestObject.readyState==4)
{
if(XMLHttpRequestObject.readyState==200)
{
obj.innerHTML=XMLHttpRequestObject.responseText;
}
else
{
obj.innerHTML=varProblem;
}
}
}
}当我点击管理登录时，没有任何反应。请帮帮我。
回答 1
Stack Overflow用户
发布于 2018-06-11 02:26:28
将数据源修复为datSource将您的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?
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50785604
复制相关文章
相似问题