我需要将 li1 和 li2 读取的值发送到对用户进行身份验证的 servlet(无 DB 调用),并且 servlet 以 true 或 false 响应。必须在我的 .js 文件中读取此布尔值,并且必须仅更改 DOM在无效用户带有适当消息的情况下,无需重新加载整个页面的结构。
我的 logintom.js 如下
goog.require('goog.dom');
goog.require('goog.events.EventType');
goog.require('goog.style');
goog.require('goog.ui.Control');
goog.require('goog.ui.Button');
goog.require('goog.ui.FlatButtonRenderer');
goog.require('goog.ui.LabelInput');
goog.require("goog.net.XhrIo");
goog.require("goog.structs.Map");
goog.require("goog.Uri.QueryData");
function setUp() {
var li1 = new goog.ui.LabelInput('USER NAME');
li1.render(goog.dom.getElement('d1'));
var li2 = new goog.ui.LabelInput('PASSWORD');
li2.render(goog.dom.getElement('d2'));
var val1;
var val2;
var fb1 = new goog.ui.Button('Login',goog.ui.FlatButtonRenderer.getInstance());
fb1.render(goog.dom.getElement('fb1'));
goog.events.listen(fb1,goog.ui.Component.EventType.ACTION,
function(e) {
val1 = li1.getValue();
val2 = li2.getValue();
var request = new goog.net.XhrIo();
goog.events.listen(request, "complete", function(){
if (request.isSuccess())
{
console.log("Satus code: ", request.getStatus(), " - ", request.getStatusText());
}
else {
console.log("Something went wrong in the ajax call. Error code: ", request.getLastErrorCode()," - message: ", request.getLastError());
}
});
var param = 'username='+val1+'&password='+val2;
var url = 'loginprocessortom?username='+val1+'&password='+val2;
request.send(url, "POST");
});
}
我的Servlet如下
public class loginprocessortom extends HttpServlet
{
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws
ServletException, IOException
{
String uname = (req.getParameter("username"));
String pword = (req.getParameter("password"));
resp.setContentType("text/html");
PrintWriter out = resp.getWriter();
if (uname == "xyz" && pword == "xyz")
{
tof = true;
}
else
{
tof = false;
}
}
}
我的 HTML 如下。
<html>
<head>
<script src="closure-library/closure/goog/base.js"></script>
<script src="logintom.js"></script>
</head>
<body onload="setUp();">
<fieldset>
<legend>
<strong>Authentication</strong>
</legend>
<div id="d1">User Name   </div>
<br>
<div id="d2">Password    
</div>
<br>
<div id="fb1"></div>
<br>
<span id="sp1"></span>
</fieldset>
</body>
</html>
我需要将此“tof”发送到我的 .js,在那里我可以使用闭包读取它并根据“tof”的值更改页面,而无需重新加载整个页面(Ajax 行为)