单击按钮时调用 perl 函数并将返回值填充到表单中的文本字段中

Question

我对 HTML、javascript 和网络世界完全陌生。我的要求如下。

界面布局

username:   __________ |find button|
First name: __________
Last name:  __________
e-mail:     __________

待完成

1. 用户在用户名文本字段中输入用户名并点击查找按钮
2. 点击查找按钮，调用Perl方法getDetails("enteredUName")
3. 从调用的 Perl 方法中捕获返回值，并在剩余的文本字段（名字、姓氏和电子邮件）中填写详细信息。

我已经准备好表单和搜索逻辑。

现在我的困惑是我应该在 search 按钮的 -onClick 属性中添加什么。在代码中，对于表单，总是有为其他按钮编写的 javascript 调用。那么我应该如何在单击搜索按钮时调用 Perl 方法并填写剩余的文本字段？

更新

根据我目前的理解做了以下事情：

1. 定义了一个隐藏的布尔参数isUsernameGiven，初始值为0，形式为
2. 当用户在文本字段中键入名称为 usernameText 的内容并单击搜索按钮时，调用 javascript 将 isUsernameGiven 的值设置为 1，并使用指定的操作设置窗口位置。
3. 操作通过应用程序 perl 脚本路由到 Perl 模块文件。在此模块中，搜索基于usernameText 参数进行
4. 新出现的表格带有预先填写的详细信息。

代码结构

ApplicationDirectory
  application.pl
    ModuleFolder
        ModuleFile.pm

application.pl:
    ...
    if ($action eq 'save') {
        my $m = new ModuleFile();
    }
    ...


ModuleFile.pm:
    ...
    sub new {
        # param isUsernameGiven is preserved/carried over from previous??
        my $isUsernameGiven = param('isUsernameGiven');
        if ($isUsernameGiven != 0) {
            param(-name=>'isUsernameGiven',-value=>$isUsernameGiven);
        }
        if ( $action eq "add" ) {
            showAddForm($self);
        } elsif ($action eq "addEmp") {
            showAddForm($self, $self->getUserInfoFromActiveDir(param('usernameText')));
        }
    }
    sub getUserInfoFromActiveDir {
        # search info and return employee object
        ...
    }
    sub showForm {
        ...
        print "\n<form name=\"edit_employee_form\" method=\"post\" action=\"application.pl\" onSubmit=\"return validate_form();\">\n";
        print "<input type='hidden' name='isUsernameGiven' value='0'/>\n";

        print "<table class=edit style=\"width:420px;\">\n";
        my $findButton = '';
        if (!$id) {
            $findButton = "<td>\n".button(-value=>"Find", -class=>"bigbutton",
                -onClick=>"document.edit_employee_form.isUsernameGiven.value=1;getDetailsFilled();")."</td>";
        }
        my $fieldname = 'username';
        print "<tr><td>Username:</td><td > \n".textfield(-name=>$fieldname -default=$unameValue,".
            "-size=>30, -maxlength=>50)."</td>".$findButton."</tr><br>";

        print "<tr><td>First Name:</td><td > \n".textfield(-name=>'first', -default=>$fnameValue, -size=>30, -maxlength=>50)."</td></tr>\n";
        print "<tr><td class=edit>Last Name:</td><td > \n".textfield(-name=>'name', -default=$lnameValue, -size=>30, -maxlength=>50)."</td></tr>\n";
        ...
    }

ModuleFile.js:
    ...
    function getDetailsFilled()
    {
        if ( document.edit_employee_form.username.value == "" )
        {
            alert ( "Please fill in a username." );
            document.edit_item_form.username.focus();
        } else {
            // Call Perl method here
            window.location="application.pl?application=ModuleFile&action=addEmp";
        }
    }
    ...

问题

1. 单击查找按钮后没有任何反应。我错过了什么？
2. 似乎参数isUsernameGiven 在子showform 中未定义。
   1. 是否为每个 ModuleFile 对象保留或重置参数值？
   2. 如果isUsernameGiven 的默认值设置为 0，那么这个值会如何变为未定义？
   3. 我对参数的理解正确吗？
3. 我目前的整体方法是否正确？

Answer 1

如果不使用 Javascript，您将无法做到这一点（嗯，您可能可以，但 99.9% 的用户将拥有只能使用 Javascript 进行客户端编程的浏览器）。

你需要这样做：

• 在您的查找按钮上设置一个 Javascript 事件处理程序，该处理程序获取用户名值并对您的网络服务器进行 AJAX 调用，包括用户名。
• 在您的 Web 服务器上编写一个 AJAX 处理程序，该处理程序接受用户名、调用您的代码、将数据格式化为 JSON 并将该数据返回给浏览器。
• 在网页中设置 Javascript，获取从 AJAX 调用返回的 JSON，提取各种数据项并将它们插入页面的适当部分。