如何 redirect/forward 到具有可变内容的新 html 页面?
How to redirect/forward to a new html page with variable content?
问题
我正在创建一个 Web 应用程序,用户可以在其中获得登录页面 login.html
,并且必须输入他的凭据。 servlet
class 使用 ajax 以 POST 请求的形式获取信息,由用户单击提交按钮生成。检查凭据的正确性后,我希望为用户提供一个新的 HTML 页面,一个欢迎页面,其中传输了 servlet
的响应。我面临的问题是如何将响应从起始 LoginServlet
class 转移到 WelcomeServlet
同时,客户端正在投影一个新的 HTML 页面,welcome.html
,并在新 HTML 页面中的 js
脚本发出的 ajax 调用中捕获 WelcomeServlet
的响应。
背景
我刚刚开始深入研究网络应用程序的开发,所以如果我在逻辑的任何部分和对整个前端到后端过程的理解上有误,请指出。我知道 redirect()
和 forward()
函数,但我不理解这些函数可以与客户端结合使用的方式,或者完全不同。
我有以下 servlets
:
public class LoginServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
RequestDispatcher dispatcher = request.getRequestDispatcher("welcomeservlet");
dispatcher.forward(request, response);
}
public class WelcomeServlet extends HttpServlet {
private static final long serialVersionUID = 2L;
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//parse request and send response
}
在 login.html 文件中,我包含了以下 js 代码:
function loadNewPage() {
// retrieve data and store them in a js Object
$.ajax({
url: "loginservlet",
type: 'POST',
dataType: 'json',
data: JSON.stringify(jsObject),
contentType: 'application/json',
mimeType: 'application/json',
success: function (data) {
window.location.href = "welcome.html";
},
error: function (data, status, er) {
alert("error: " + data.text + " status: " + status + " er:" + er);
}
});
}
我没有包括另一个 js
脚本,该脚本将故意放置在 welcome.html
中,因为我不知道我必须在其中添加什么才能捕获新的响应小服务程序。整个事情无法正常工作的一个可能原因可能是我在 forward() 函数的功能中遗漏了一些东西,但找不到在线示例来完成我想做的事情。
(图片来源 w3schools)
事实是您不能跳转到另一个 servlet。 Ajax 响应将发送回生成请求的同一网页。
根据您的要求,您可以在 LoginServlet 中检查登录是否成功。如果是,创建一个令牌,将其与用户名一起保存在数据库中,并将相同的令牌作为响应发送给客户端。
现在在客户端中将令牌保存在 localStorage
中并重定向到 welcome.html.
在welcome.html页面加载时检查保存在localStorage中的token是否存在。如果是,请检查它是否有效。如果有效,调用 WelcomeServlet 。否则显示登录屏幕。
这称为基于令牌的身份验证。您可以阅读更多相关信息 here
问题
我正在创建一个 Web 应用程序,用户可以在其中获得登录页面 login.html
,并且必须输入他的凭据。 servlet
class 使用 ajax 以 POST 请求的形式获取信息,由用户单击提交按钮生成。检查凭据的正确性后,我希望为用户提供一个新的 HTML 页面,一个欢迎页面,其中传输了 servlet
的响应。我面临的问题是如何将响应从起始 LoginServlet
class 转移到 WelcomeServlet
同时,客户端正在投影一个新的 HTML 页面,welcome.html
,并在新 HTML 页面中的 js
脚本发出的 ajax 调用中捕获 WelcomeServlet
的响应。
背景
我刚刚开始深入研究网络应用程序的开发,所以如果我在逻辑的任何部分和对整个前端到后端过程的理解上有误,请指出。我知道 redirect()
和 forward()
函数,但我不理解这些函数可以与客户端结合使用的方式,或者完全不同。
我有以下 servlets
:
public class LoginServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
RequestDispatcher dispatcher = request.getRequestDispatcher("welcomeservlet");
dispatcher.forward(request, response);
}
public class WelcomeServlet extends HttpServlet {
private static final long serialVersionUID = 2L;
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//parse request and send response
}
在 login.html 文件中,我包含了以下 js 代码:
function loadNewPage() {
// retrieve data and store them in a js Object
$.ajax({
url: "loginservlet",
type: 'POST',
dataType: 'json',
data: JSON.stringify(jsObject),
contentType: 'application/json',
mimeType: 'application/json',
success: function (data) {
window.location.href = "welcome.html";
},
error: function (data, status, er) {
alert("error: " + data.text + " status: " + status + " er:" + er);
}
});
}
我没有包括另一个 js
脚本,该脚本将故意放置在 welcome.html
中,因为我不知道我必须在其中添加什么才能捕获新的响应小服务程序。整个事情无法正常工作的一个可能原因可能是我在 forward() 函数的功能中遗漏了一些东西,但找不到在线示例来完成我想做的事情。
(图片来源 w3schools)
事实是您不能跳转到另一个 servlet。 Ajax 响应将发送回生成请求的同一网页。
根据您的要求,您可以在 LoginServlet 中检查登录是否成功。如果是,创建一个令牌,将其与用户名一起保存在数据库中,并将相同的令牌作为响应发送给客户端。
现在在客户端中将令牌保存在 localStorage
中并重定向到 welcome.html.
在welcome.html页面加载时检查保存在localStorage中的token是否存在。如果是,请检查它是否有效。如果有效,调用 WelcomeServlet 。否则显示登录屏幕。
这称为基于令牌的身份验证。您可以阅读更多相关信息 here