Javascript/AAJAX发送多个返回
Javascript/AJAX sends multiple returns
用户输入凭据并验证凭据后,我将尝试替换表行。这是一个对servlet的简单AJAX调用,发送凭据并返回一些特定信息(名字、姓氏、邮政编码等)。
我注意到,对authenticate的调用实际上返回了多次,第一对为null且"未定义"。我输入了一些代码来处理这个问题,然后删除了所有的故障排除警报,并注意到它根本不起作用。
在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;
}
success
和error
属性是最终将执行的函数。请记住,AJAX中的A最初代表异步,因此您的成功/错误函数不会在与进行AJAX调用的函数相同的范围内运行。
您可以跳过各种各样的障碍,尝试使用返回值的概念来构建异步代码网格,但这种方式是疯狂的。如果你将逻辑向前推进,那么你会有更多的运气,从而在成功/错误函数中做出决定。
这是一种不同的编程思想,但您不想说if(authenticate()){ do something;}
,它需要authenticate()
的同步返回值,而是希望遵循类似authenticate(doSomething);
的模式(其中doSomething
是函数名),在执行链中向前传递逻辑。
有关如何在JavaScript中更好地处理异步逻辑的更多示例,您可以搜索JavaScript"promise"。
Authenticate方法是异步的,现在它将返回null
。您必须将回调函数传递给authenticate
,然后在success
处理程序中调用它,或者返回Deffered
或Promise
,然后像这样使用
authenticate(logon, password).then(function(returnString) {
// your logic
});
- 节点导出返回一个空对象
- ES6构造函数返回基类的实例
- 监视函数从服务返回不起作用,但作用域函数起作用
- 控制台返回var不是't定义,但它是
- 从函数返回角度承诺
- Javascript返回值只在循环中返回一次
- 从控制器返回后Ajax启动事件激发
- CKFinder 3为所选文件返回错误的URL
- 如何在d3.js中返回路径的y坐标
- 如何从jquery函数返回变量
- Angular js-返回一个包含类似
- JSONP请求返回结果,但也触发error_callback
- 如何使用Spring MVC将Facebook返回的响应数据保存在Java类中
- 从HTTPGET返回一个自定义对象列表,以便在Angular 2应用程序中使用
- JS验证ajax返回的html中的表单数据
- 使用谷歌应用程序脚本将服务器端数据表返回到客户端
- AJAX:$_GET不返回任何值
- 从Javascript方法返回全局变量
- Javascript/AAJAX发送多个返回
- jQuery/AAJAX,检索我的方法返回的字符串