我试图在用户输入其凭据并且凭据经过验证后替换表格行。这是对servlet的简单AJAX调用,发送凭证并返回一些特定信息(名字,姓氏,邮政编码等)。
我注意到,进行身份验证的调用实际上返回了多次,其中第一对为null,并且为“ undefined”。我放入一些代码来处理此问题,然后删除了所有故障排除警报,并注意到它根本没有用。
在authenticate()返回之前,有了警报,它可以按我的预期工作。但是,如果我退出警报,它将停止工作。
我没有使用过太多的AJAX,也无法定义足够的问题来在线进行任何研究。我希望尽管我不善描述问题,但有人会认出我。
那么,我在哪里出错呢?
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Training Daily Activity Report</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="stylesheets/dar.css">
<script src="js/DAR.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
<style type='text/css'>
html {
background: url(images/officebuilding.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
</head>
<body>
<div style='width: 100%;text-align: center;margin-top: 55px;'>
<div style='width: 90%;margin-right: auto; margin-left: auto;'>
<form id='fmDAR' action='DARServlet' method='post'>
<input type="hidden" id="formType" name="formType" value="" />
</form>
<table style='width: 100%'>
<tr>
<td colspan='2' class='firstBlock'>
<span style='font-size: 24px'>Daily Activity Report</span>
</td>
</tr>
<tr>
<td style='width: 15%;text-align: right;'>
<span style='padding-right: 5px;'>Categories worked on:</span>
</td>
<td style='width: 75%;'>
<textarea rows='3' style='width: 99%;' type='text' id='taCategories' name='taCategories' value=''></textarea>
</td>
</tr>
</table>
<br>
<table style='width: 100%;'>
<tr>
<td class="secondBlock">
<span>Trainee</span>
</td>
<td class="secondBlock">
<span>DTO/Trainer</span>
</td>
<td class="secondBlock">
<span>Phase</span>
</td>
<td class="secondBlock">
<span>DOT</span>
</td>
</tr>
<tr>
<td style='text-align: center;'>
<input style="width: 98%;" type="text" id="txtTrainee" name="txtTrainee" value="" />
</td>
<td style='text-align: center;'>
<input style='width: 98%;' type="text" id="txtTrainee" name="txtTrainee" value="" />
</td>
<td style='text-align: center;'>
<input style='width: 98%;' type="text" id="txtTrainee" name="txtTrainee" value="" />
</td>
<td style='text-align: center;'>
<input style='width: 98%;' type="text" id="txtTrainee" name="txtTrainee" value="" />
</td>
</tr>
</table>
<br>
<table style='width: 100%;'>
<tr>
<td class='thirdBlock'>
Trainee's Comments: What did you learn? What do you still need to know?
</td>
</tr>
<tr>
<td style='width: 100%;'>
<textarea style='width: 99%;' rows='8' id='taTraineeComments' name='taTraineeComments' value=''></textarea>
</td>
</tr>
</table>
<br>
<table style='width: 100%;'>
<tr>
<td class='fourthBlock'>
DTO Comments: What areas of trainee performance need improvement?
</td>
</tr>
<tr>
<td style='width: 100%;'>
<textarea style='width: 99%;' rows='8' id='taDTOComments' name='taDTOComments' value=''></textarea>
</td>
</tr>
</table>
<br>
<table style='width: 100%;'>
<thead>
<tr>
<td> </td>
<td>Logon ID</td>
<td>Password</td>
<td> </td>
</tr>
</thead>
<tbody>
<tr>
<td class='authentication' id='tdTraineeAuthentication'>
Trainee Authentication:
</td>
<td>
<input type='text' id='txtTraineeAuthLogon' name='txtTraineeAuthLogon' value='' />
</td>
<td>
<input type='password' id='txtTraineeAuthPW' name='txtTraineeAuthPW' value='' />
</td>
<td>
<button onclick='authenticateUser()'>Authenticate</button>
</td>
</tr>
<tr>
<td class='authentication'>
DTO Authentication:
</td>
<td>
<input type='text' id='txtDTOAuthLogon' name='txtDTOAuthLogon' value='' />
</td>
<td>
<input type='password' id='txtDTOAuthPW' name='txtDTOAuthPW' value='' />
</td>
<td>
<button onclick='authenticateDTO()'>Authenticate</button>
</td>
</tr>
<tr>
<td class='authentication'>
DTS Authentication:
</td>
<td>
<input type='text' id='txtDTSAuthLogon' name='txtDTSAuthLogon' value='' />
</td>
<td>
<input type='password' id='txtDTSAuthPW' name='txtDTSAuthPW' value='' />
</td>
<td>
<button onclick='authenticateDTS()'>Authenticate</button>
</td>
</tr>
</tbody>
</table>
</div>
<div style='text-align: center;margin-top: 20px;'>
<button style='height: 45px;' id='btnSave' onclick='saveDAR()'>Save Daily Activity Report</button>
</div>
</div>
</body>
JS:
function authenticateUser() {
var logon = document.getElementById("txtTraineeAuthLogon").value;
var pw = document.getElementById("txtTraineeAuthPW").value;
if (logon != null && pw != null) {
var tmp = authenticate(logon, pw);
var tmp2;
if (tmp != null) { //authenticate returns several results, the first few being "null" or "undefined"
if (tmp.toLowerCase() != 'undefined') {
tmp2 = tmp;
}
}
if (tmp2 != null) {
var tmpRow = " <tr>"
+ " <td class='authentication' id='trTraineeAuthentication'>"
+ " Trainee Authentication:"
+ " </td>"
+ " <td colspan='3' style=\"text-align: center;\">"
+ " Authenticated as " + tmp2 + ""
+ " </td>"
+ " </tr>";
$("td#tdTraineeAuthentication").parent().replaceWith(tmpRow);
}
}
}
function authenticateDTO() {
}
function authenticateDTS() {
}
function authenticate(logon, password) {
var returnString = null;
var givenName;
var sn;
var postalCode;
$.ajax({
url: 'DARServlet',
data: {
formType: 'authenticate', logon: logon, password: password
},
contentType: 'application/json',
mimeType: 'application/json',
success: function (responseText) {
$.each(responseText, function (key, value) {
if (key == "givenName") {
givenName = value;
} else if (key == "sn") {
sn = value;
} else if (key == "postalCode") {
postalCode = value;
}
});
returnString = givenName + " " + sn + ", Employee #: " + postalCode;
//alert(returnString);
},
error: function (request, status, error) {
alert("The credentials used cannot be authenticated. Please re-enter and try again.");
return null;
}
});
alert("returnString: " + returnString);
return returnString;
}
最佳答案
Ajax对象的success
和error
属性是最终将要执行的函数。请记住,AJAX中的A最初代表异步,因此您的成功/错误函数将不会在与进行AJAX调用的函数相同的范围内运行。
您可以跳过各种麻烦,尝试使异步代码与返回值的概念啮合,但这就是疯狂。如果您将逻辑向前推进,将会有更多的运气,以便在成功/错误功能中做出决定。
这是一种不同的编程思维方式,但是您无需遵循if(authenticate()){ do something;}
(它需要来自authenticate()
的同步返回值)的方法,而是希望遵循authenticate(doSomething);
这样的模式(其中doSomething
是函数名),将执行链中的逻辑前进。
有关在JavaScript中更好地处理异步逻辑的方法的更多示例,可以搜索JavaScript“ promises”。