我试图在用户输入其凭据并且凭据经过验证后替换表格行。这是对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>&nbsp;</td>
                        <td>Logon ID</td>
                        <td>Password</td>
                        <td>&nbsp;</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对象的successerror属性是最终将要执行的函数。请记住,AJAX中的A最初代表异步,因此您的成功/错误函数将不会在与进行AJAX调用的函数相同的范围内运行。

您可以跳过各种麻烦,尝试使异步代码与返回值的概念啮合,但这就是疯狂。如果您将逻辑向前推进,将会有更多的运气,以便在成功/错误功能中做出决定。

这是一种不同的编程思维方式,但是您无需遵循if(authenticate()){ do something;}(它需要来自authenticate()的同步返回值)的方法,而是希望遵循authenticate(doSomething);这样的模式(其中doSomething是函数名),将执行链中的逻辑前进。

有关在JavaScript中更好地处理异步逻辑的方法的更多示例,可以搜索JavaScript“ promises”。

07-24 09:44
查看更多