使用Perl和jQuery回发值
使用Perl和jQuery回发值,jquery,perl,Jquery,Perl,我试图在一个脚本中使用，一旦这个表单被提交，它将更新数据库并将结果返回给它自己，在同一个页面上，而不刷新页面。 我一直在试图理解为什么一旦表单被提交并且所有的值都被传递（我可以使用firebug看到所有的值），结果就不会显示在页面上，如下所示： print "<br>Display Results once the submit gets done: *$user_name*$user_id*$city_from*$state_from*$checkin_comments*<
我试图在一个脚本中使用，一旦这个表单被提交，它将更新数据库并将结果返回给它自己，在同一个页面上，而不刷新页面。 我一直在试图理解为什么一旦表单被提交并且所有的值都被传递（我可以使用firebug看到所有的值），结果就不会显示在页面上，如下所示：
print "<br>Display Results once the submit gets done: *$user_name*$user_id*$city_from*$state_from*$checkin_comments*<br>";
print“
提交完成后显示结果：$user\u name*$user\u id*$city\u from*$state\u from*$checkin\u comments*
”；
#!/usr/bin/perl
use strict;
use warnings;
use CGI;
use Data::Dumper;
my $q = CGI->new();
print $q->header();
my $transac = $q->param( 'transac' ) || '';
# Get values
my $user_name = $q->param( 'user_name' ) || '';
my $user_id = $q->param( 'userid' ) || '';
my $city_from = $q->param( 'city_from' ) || '';
my $state_from = $q->param( 'state_from' ) || '';
my $checkin_comments = $q->param( 'checkin_comments' ) || '';
print "<br>Display Results once the submit gets done: *$user_name*$user_id*$city_from*$state_from*$checkin_comments*<br>";
if($transac eq "checkin") {
my $res = results();
print "<br> *$res* $user_name*$user_id*$city_from*$state_from*$checkin_comments*<br>";
}else {
start_html();
}
sub results {
if ($user_name) {
return 'success';
} else {
return 'error';
}
} # End sub results
sub start_html {
my $html_code = qq (
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-type" content="application/xhtml+xml; charset=utf-8" />
<meta http-equiv="Content-language" content="en-gb" />
<title>jquery from hell</title>
<script type="text/javascript" src="/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
\$(function () {
\$('.reply-comment').on('click', function (e) {
e.preventDefault();
var form = \$('.reply-form');
var CommentID = \$(this).attr('id');
//alert(CommentID);
if (form.is(':visible')) {
// hide it
form.hide(function () {
\$('#' + CommentID).html('<a href="" class="reply-comment" id="reply-comment-' + CommentID + '"> [ Check-In ] </a>');
});
}else{
// show it
form.show(function () {
\$('#' + CommentID).html('<a href="" class="reply-comment" id="reply-comment-' + CommentID + '">[ Cancel ]</a>');
});
}
});
});
</script>
<style>
.reply-form {
display:none;
}
</style>
<script type="text/javascript" >
function onSuccess(data, status) {
data = \$.trim(data);
alert(data);
var form = \$('.reply-form');
var CommentID = 1;
\$("form#reply-form").trigger('reset');
if (data) {
// hide it
form.hide(function () {
\$('#' + CommentID).html('<a href="" class="reply-comment" id="reply-comment-' + CommentID + '"> [ xCheck-In ] </a>');
});
}else{
// show it
form.show(function () {
\$('#' + CommentID).html('<a href="" class="reply-comment" id="reply-comment-' + CommentID + '">[ xCancel ]</a>');
});
}
}
function onError(data, status, e) {
alert( "Sorry, there was a problem!" );
alert(data);
console.log(e);
}
\$(document).ready(function(){
\$("form#reply-form").submit(function() { // reply-form is submitted
var formData = \$("#reply-form").serialize();
// alert(formData);
\$.ajax({
type: "post",
url: "pjtest.pl",
cache: false,
data: formData,
success: onSuccess,
error: onError
});
// return false to prevent normal browser submit and page navigation
return false;
});
});
</script>
</head>
<body bgcolor="#ffffff">
<table width="500" border="1" bgcolor="#ffffff" cellpadding="5" cellspacing="0">
<tr>
<form name="postItem" action="test.pl" method="post" STYLE="margin: 0px; padding: 0px;">
<td align="center" width="33%" valign="bottom">
<input type="submit" id="submitLink" value="[ Post ]">
</td></form>
<td align="center" width="34%" valign="middle">
<a href="" class="reply-comment" id="1"> [ Check-In ] </a>
</td>
<form name="postItem" action="test.pl" method="post" STYLE="margin: 0px; padding: 0px;">
<td align="right" width="33%" valign="bottom">
<input type="submit" id="submitLink" value="[ Log out ]">
</td>
</form>
</tr>
</table>
<!-- Check in stuff -->
<div class="reply-form well">
<table width="100%" border="0" bgcolor="#1A1A1A" cellpadding="5" cellspacing="0">
<tr><form name="reply-form" id="reply-form" method="post" style="margin: 0px; padding: 0px;">
<input id="transac" type="hidden" name="transac" value="checkin">
<input id="user_name" type="hidden" name="user_name" value="theusername">
<input id="userid" type="hidden" name="userid" value="923">
<input id="city" name="city_from" type="hidden" value="Boston" />
<input id="state" name="state_from" type="hidden" value="MA" />
<td align="center">
<textarea id="checkin_comments" name="checkin_comments" rows="4" cols="40" class="span10"></textarea>
</td>
<tr>
<td align="center">
<!--input type="submit" id="submitLink" value="[ Submit ]" /-->
<input type="image" src="/images/check.png" alt="Submit button" width="50" height="33" class="submit" id="send_comments">
</form>
</td>
</tr>
</table>
</body></html>);
print $html_code;
#return $html_code;
} # End start_html sub
#/usr/bin/perl
严格使用；
使用警告；
使用CGI；
使用数据：：转储程序；
my$q=CGI->new（）；
打印$q->header（）；
我的$transac=$q->param（'transac'）| |'；
#获取价值
我的$user_name=$q->param（'user_name'）||“”；
我的$user|id=$q->param（'userid'）||'；
my$city_from=$q->param（'city_from'）||'；
我的$state_from=$q->param（'state_from'）||'；
我的$checkin_comments=$q->param（'checkin_comments'）| |“”；
打印“
提交完成后显示结果：$user\u name*$user\u id*$city\u from*$state\u from*$checkin\u comments*
”；
if（$transac eq“签入”）{
我的$res=结果（）；
打印“
*$res*$user\u name*$user\u id*$city\u from*$state\u from*$checkin\u comments*
”；
}否则{
启动html（）；
}
子结果{
如果（$user\u name）{
回归"成功",；
}否则{
返回“错误”；
}
}#最终子结果
子启动程序{
我的$html\u代码=qq(
来自地狱的jquery
\$（函数（）{
\$（'.reply comment'）。关于（'click'，函数（e）{
e、 预防默认值（）；
var form=\$（'.reply form'）；
var CommentID=\$（this.attr（'id'）；
//警报（CommentID）；
if（form.is（'：visible'））{
//藏起来
form.hide（函数（）{
\$（'#'+CommentID）.html（''）；
});
}否则{
//表现出来
form.show（函数（）{
\$（'#'+CommentID）.html（''）；
});
}
});
});
.回覆表格{
显示：无；
}
成功时的功能（数据、状态）{
数据=\$.trim（数据）；
警报（数据）；
var form=\$（'.reply form'）；
var-id=1；
\$（“表单#回复表单”）.trigger（'reset'）；
如果（数据）{
//藏起来
form.hide（函数（）{
\$（'#'+CommentID）.html（''）；
});
}否则{
//表现出来
form.show（函数（）{
\$（'#'+CommentID）.html（''）；
});
}
}
功能onError（数据、状态、e）{
警报（“抱歉，出现问题！”）；
警报（数据）；
控制台日志（e）；
}
\$（文档）.ready（函数（）{
\$（“表单#回复表单”）.submit（函数（）{//回复表单已提交
var formData=\$（“#回复表单”）.serialize（）；
//警报（formData）；
\$.ajax({
类型：“post”，
url:“pjtest.pl”，
cache:false，
数据：formData，
成功：一旦成功，
错误：onError
});
//返回false以防止正常的浏览器提交和页面导航
返回false；
});
});
);
打印$html_代码；
#返回$html_代码；
}#结束-开始"html子模块
my $state_from = $q->param( 'state_from' ) || '';
my $checkin_comments = $q->param( 'checkin_comments' ) || '';
# print "<br>Display Results once the submit gets done: *$user_name*$user_id*$city_from*$state_from*$checkin_comments*<br>";
my$state_from=$q->param（'state_from'）||'；
我的$checkin_comments=$q->param（'checkin_comments'）| |“”；
#打印“
提交完成后显示结果：$user\u name*$user\u id*$city\u from*$state\u from*$checkin\u comments*
”；
if (data) {
// hide it
form.hide(function () {
\$('#' + CommentID).html('<a href="" class="reply-comment" id="reply-comment-' + CommentID + '"> [ xCheck-In ] </a>');
});
\$('#results').html(data);
if（数据）{
//藏起来
form.hide（函数（）{
\$（'#'+CommentID）.html（''）；
});
\$（'#results'）.html（数据）；
<body bgcolor="#ffffff">
<br>Display Results once the submit gets done: <span id='results'></span><br>
<table width="500" border="1" bgcolor="#ffffff" cellpadding="5" cellspacing="0">
提交完成后显示结果：
成功用户名*923*Boston*MA*asd*perlmonks.org的评论只建议对代码进行化妆品更改，没有对此处发布的问题给出任何答案。不幸的是，toolic的观点是，您在问题中没有这样说就向perlmonks交叉发布了。交叉发布是可以的，但通常认为告诉人们您被拒绝是礼貌的这样做。此外，一旦你在任何一个网站上得到答案，请立即更新另一个网站，这样人们就不会浪费时间寻找已经解决的问题的解决方案。此外，当你发布一大堆这样的代码时，你不太可能得到很多答案；这对人们来说太难了。试着将问题缩小到一个简短的范围，自足的例子，使人们更容易帮助你。是的，我当然会这样做！