我试图在一个脚本中使用，一旦这个表单被提交，它将更新数据库并将结果回发给它自己，在同一页面上没有刷新页面。
我很难理解为什么一旦表单被提交并且所有值都被传递（我可以使用firebug看到所有值），结果就不会像在这一行中那样显示在页面上：
print "<br>Display Results once the submit gets done: *$user_name*$user_id*$city_from*$state_from*$checkin_comments*<br>";
我错过了什么。 我有这个测试代码，显示了我想要做的事情：
#!/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
答案 0 :(得分：0)
我做到了：
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 (data) {
// hide it
form.hide(function () {
\$('#' + CommentID).html('<a href="" class="reply-comment" id="reply-comment-' + CommentID + '"> [ xCheck-In ] </a>');
});
\$('#results').html(data);
最后：
<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 *