我是HTML,JavaScript和网络世界的新手 . 我的要求如下 .
UI布局
username: __________ |find button|
First name: __________
Last name: __________
e-mail: __________
待完成
-
用户在用户名文本字段中输入用户名并单击“查找”按钮
-
点击查找按钮,调用Perl方法
getDetails("enteredUName")
-
从被调用的Perl方法中捕获返回值,并在剩余的文本字段中填写详细信息(名字,姓氏和电子邮件) .
我已准备好表格和搜索逻辑 .
现在我的困惑是我应该放在 search 按钮的 -onClick
属性中 . 在代码中,对于表单,总是为其他按钮编写javascript调用 . 那么在点击搜索按钮并填充剩余的文本字段后,我该如何调用Perl方法呢?
更新
根据我目前的理解做了以下事情:
-
在表单中定义了一个隐藏的布尔参数
isUsernameGiven
,初始值为0 -
当用户在名为
usernameText
的文本字段中键入内容并单击搜索按钮时,调用javascript将isUsernameGiven
的值设置为1,并将窗口位置设置为指定的操作 . -
Action通过应用程序perl脚本路由到Perl模块文件 . 在此模块中,搜索基于
usernameText
参数进行 -
新出现的表单附带预先填写的详细信息 .
代码结构
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";
}
}
...
问题
-
点击查找按钮后没有任何反应 . 我错过了什么?
-
似乎参数
isUsernameGiven
在subshowform
中未定义 . -
是否为每个
ModuleFile
对象保留或重置参数值? -
如果
isUsernameGiven
的默认值设置为0,那么值是如何未定义的? -
我对params的理解是否正确?
-
我目前的总体方法是否正确?
1 回答
如果不涉及Javascript,你不能这样做(嗯,你可能会,但99.9%的用户将拥有只能使用Javascript进行客户端编程的浏览器) .
你需要这样做:
在您的查找按钮上设置Javascript事件处理程序,该处理程序获取用户名值并对您的Web服务器进行AJAX调用,包括用户名 .
在Web服务器上编写一个AJAX处理程序,它接受用户名,调用代码,将数据格式化为JSON并将该数据返回给浏览器 .
在网页中设置Javascript,其中包含从AJAX调用返回的JSON,提取各种数据项并将它们插入到页面的相应部分 .