javascript - 如何使用 document.getElementById

Question

在我的 JSP 页面中，我有一个用于登录的表单，其中包含两个文本框，名称和 ID 分别为“u”(用户名)和“p”(密码)。我将这些值作为

var user=document.getElementById("u").value;

var pass=document.getElementById("p").value;

当应用程序的第一个用户尝试以 user1 身份登录并以 pass1 身份通过时。该值被传递给 admin.java，后者使用 request.getParameter 获取值。

这一切都很好。在第一个用户注销后。另一个用户尝试使用身份验证用户作为 user2 再次登录并作为 pass2 传递问题是变量 user 并在 index.jsp 中传递保留 user1 和 pass1 的相同旧值。我通过警报框检查了这些。将相同的值传递给 Admin.java。

index.jsp中的代码是

    function prepareLoginDialog(){
    $dialog = $('<div></div>')
    .html('<div id="dialog-confirm" title="Enter the login details here :">'+
        'User: <input type="text" id="u" name="u" ></input><br />'+
        'Pass: <input type="password" id="p" name="p" ></input>'+
        '</div>')

        //System.out.println(user);
    //System.out.println(pass);
    .dialog({
        autoOpen: false,
        modal: true,
        title: 'Login',
        buttons: {
            'Login': function() {
                //Send Login Request to Server
                alert("I in login");

                var user = document.getElementById("u").value;
                var pass = document.getElementById("p").value;
                alert(user);
                alert(pass);
                //System.out.println(u.text);
                login(user,pass);

                $(this).dialog('close');
            },
            Cancel: function() {
                $(this).dialog('close');
            }
        }
    });

    $('#login').click(function() {
        $dialog.dialog('open');
        // prevent the default action, e.g., following a link
        return false;
    });
}

为什么两个变量没有取新值？我哪里出错了？

Answer 1

我认为您的问题与我在此处提到的问题相同:Variables doesnt refresh after AJAX request completed

基本上，如果您每次都重新创建对话框，您也会重新创建 ID。这意味着它们不再是唯一的，并且可能会导致您的脚本出现问题。尝试将 close 函数添加到您的对话脚本中，如下所示:

.dialog({
    autoOpen: false,
    modal: true,
    title: 'Login',
    buttons: {
        'Login': function() {
            //Send Login Request to Server
            alert("I in login");

            var user = document.getElementById("u").value;
            var pass = document.getElementById("p").value;
            alert(user);
            alert(pass);
            //System.out.println(u.text);
            login(user,pass);

            $(this).dialog('close');
        },
        Cancel: function() {
            $(this).dialog('close');
        }
    },
    close: function() { $dialog.remove(); } //$(this).remove(); Might also work.
});

这会在关闭时从 DOM 中删除对话框。

来 self 的另一篇文章:
您的另一种选择是将对话框保存在全局变量中，然后检查它是否已定义。如果它没有做你正在做的事情。如果有，请设置一个变量来告诉它您正在编辑的项目的 ID 是什么，并在运行 .dialog("open") 之前将所有文本框重置为空白；再次。