将数据传递给 CGI 脚本并使用 jQuery.ajax 返回答案

【问题标题】：Pass data to CGI script and back with jQuery.ajax将数据传递给 CGI 脚本并使用 jQuery.ajax 返回
【发布时间】：2013-08-28 19:11:10
【问题描述】：

我正在使用 jQuery.ajax() 将一些 HTML 表单数据发送到服务器上的 Perl 脚本，然后将一些数据返回到前端。

数据最好是文本/字符串格式。我还需要将其保存为变量，以便在 jQuery 函数中进一步使用。

我已经设置了 HTML 代码、JavaScript 代码和 CGI Perl 脚本，但是当 JavaScript 工作时，连接到CGI Perl 脚本不是，我总是收到错误消息：“脚本调用不成功”。

也许有人可以告诉我错误在哪里？我不完全确定如何将变量从 Perl 脚本返回到服务器。

由于我还是 jQuery 和 JavaScript 的新手，并且之前没有使用过异步调用，因此我们将不胜感激。

这是我的代码：

HTML 代码：（用户用他的名字和名字填写表单：

<html>
  <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="get_names.js"></script>
  </head>
  <body>
    <div id="loginContent" class="container">
        <div id="loginResult" style="display:none;">
        </div>
        <form id="loginForm" name="loginForm" method="post" action="">
        <fieldset>
            <legend>Enter information</legend>
            <p>
            <label for="firstname">First name</label>
            <br />
            <input type="text" id="firstname" name="firstname" class="text" size="20" />
            </p>
            <p>
            <label for="name">Name</label>
            <br />
            <input type="test" id="name" name="name" class="text" size="20" />
            </p>
            <p>
            <button type="submit" class="button positive">
             Login
            </button>
            </p>
        </fieldset>
        </form>
    </div>
  </body>
</html>

JavaScript 代码：

$(document).ready(function(){
  $("form#loginForm").submit(function() { // loginForm is submitted


var firstname = $('#firstname').attr('value'); // get first name
var name = $('#name').attr('value'); // get name

if (firstname && name) { // values are not empty
    $.ajax({
        type: "POST",
        url: "/cgi-bin/perl_script.cgi", // URL of the Perl script

        // send firstname and name as parameters to the Perl script
        data: "firstname=" + firstname + "&name=" + name,

        // script call was *not* successful
        error: function() { 
            alert("script call was not successful");
        }, 

        // script call was successful 
        // perl_data should contain the string returned by the Perl script 
        success: function(perl_data){
            alert("Your name is: " + perl_data)
        }
    });   
}

else {
  $('div#loginResult').text("Enter your name");
  $('div#loginResult').addClass("error");
}

$('div#loginResult').fadeIn();
return false;
  });
});

Perl 代码：

#!/usr/bin/perl -w
use CGI;
use strict;
use warnings;

# read the CGI params
my $cgi = CGI->new;
my $firstname = $cgi->param("firstname");
my $name = $cgi->param("name");

my $completename = $firstname . $name;

print $completename;

【问题讨论】：

标签： javascript jquery ajax perl

【解决方案1】：

问题出在 Perl 程序中。它不编译。它不发送所需的 HTTP 标头。添加print $cgi->header('text/plain;charset=UTF-8'); 或类似名称，并注意编码适合内容类型的输出。

【讨论】：

谢谢，现在可以使用了。我将变量转换为字符串以获得良好的度量并更正了顶部的错字：my $completename = $firstname . $name; my $completename = "$completename"; print $cgi->header('text/plain;charset=UTF-8'); print $completename;
您的代码$completename = "$completename" 在这里完全没有用处。为什么不只是print "$firstname $name";？
你是对的，当然。这只是我在添加真正的 Perl 代码之前需要运行的一个简单示例。