Javascript 单击按钮调用perl函数，并将返回值填入表单中的文本字段

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

用户界面布局 待完成

用户在用户名文本字段中输入用户名并单击查找按钮

单击find按钮，调用Perl方法

getDetails（“enteredUName”）

从被调用的Perl方法中捕获返回值，并在剩余的文本字段（first、last names和email）中填写详细信息 我已经准备好了表格和搜索逻辑

现在我的困惑是我应该在搜索按钮的

-onClick

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

更新 根据我目前的理解，我做了以下工作：

在表单中定义了一个初始值为0的隐藏布尔参数

isUsernameGiven

当用户在文本字段中键入名称为

usernameText

的内容并单击搜索按钮时，调用javascript，将

isUsernameGiven

的值设置为1，并使用指定的操作设置窗口位置

操作通过应用程序Perl脚本路由到Perl模块文件。在此模块中，搜索基于

usernameText

参数进行

新出现的表格带有预先填写的详细信息

代码结构

ApplicationDirectory
application.pl
模块文件夹
ModuleFile.pm
application.pl：
...
如果（$action eq‘save’）{
my$m=新模块文件（）；
}
...
ModuleFile.pm：
...
次新{
#参数isUsernameGiven保留/从以前的？？
my$isUsernameGiven=param（'isUsernameGiven'）；
如果（$isUsernameGiven！=0）{
参数（-name=>'isUsernameGiven'，-value=>$isUsernameGiven）；
}
如果（$action eq“add”）{
showAddForm（$self）；
}elsif（$action eq“addamp”）{
showAddForm（$self，$self->getUserInfoFromActiveDir（param（'usernameText'））；
}
}
子getUserInfoFromActiveDir{
#搜索信息并返回员工对象
...
}
子节目表{
...
打印“\n\n”；
打印“\n”；
打印“\n”；
我的$findButton=''；
如果（！$id）{
$findButton=“\n”.button（-value=>“Find”，-class=>“bigbutton”，
-onClick=>“document.edit_employee_form.isUsernameGiven.value=1；getDetailsFilled（）；”；
}
我的$fieldname='username'；
打印“用户名：\n”.textfield（-name=>$fieldname-default=$unameValue，”。
“-size=>30，-maxlength=>50）。”.$findButton.“
”；
打印“名字：\n”.textfield（-Name=>'First'，-default=>$fnameValue，-size=>30，-maxlength=>50）。“\n”；
打印“姓氏：\n”.textfield（-Name=>Name'，-default=$lnameValue，-size=>30，-maxlength=>50）。“\n”；
...
}
ModuleFile.js：
...
函数getDetailsFilled（）
{
如果（document.edit\u employee\u form.username.value==“”）
{
提醒（“请填写用户名”）；
document.edit_item_form.username.focus（）；
}否则{
//在这里调用Perl方法
window.location=“application.pl？application=ModuleFile&action=addamp”；
}
}
...

问题

单击“查找”按钮后，不会发生任何事情。我错过了什么

似乎参数

isUsernameGiven

在子

showform

中未定义。

每个

ModuleFile

对象的参数值都会被保留或重置吗

如果

isUsernameGiven

的默认值设置为0，那么该值怎么会是未定义的

我对params的理解正确吗

我目前的总体方法正确吗

---

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

您需要这样做：

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

---

您是否正在自动化浏览器？如果是，请参阅和/或。否则，您将不得不学习如何工作。在这两种情况下，除了Perl之外，你还必须学习JavaScript。如果你想写一个网站，你可以在Perl写客户代码，考虑看，它允许你在浏览器上运行客户机Perl。

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

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";
        }
    }
    ...