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

Question

我对HTML、javascript&网络世界。我的要求如下。

UI布局

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

待完成

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

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

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

更新

根据我目前的理解，做了以下几点：

1. 定义了一个隐藏的布尔参数isUsernameGiven，初始值为0，形式为
2. 当用户在名为usernameText的文本字段中键入内容并单击搜索按钮时，调用javascript，该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. 我对params的理解正确吗
3. 我目前的总体方法正确吗

Answer 1

如果不使用Javascript，你就无法做到这一点(嗯，你可能可以，但99.9%的用户的浏览器只能使用Javascript进行客户端编程(。

你需要这样做：

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