Pass data to CGI script and back with jQuery.ajax

javascript jquery ajax perl

15,761

The problem is in the Perl program. It does not compile. It does not send the required HTTP headers. Add print $cgi->header('text/plain;charset=UTF-8'); or similar and take care to encode the output appropriate for the content type.

15,761

atreju

This user prefers to keep an air of mystery about them

Updated on September 14, 2022

Comments

atreju over 1 year

I'm working with jQuery.ajax() to send some HTML form data to my Perl script on the server and then return some data back to the frontend.

Preferably, the data should be in text/string format. I also need to save it as a variable for further use in jQuery functions.

I already set up the HTML code, the JavaScript code and the CGI Perl script, but while JavaScript is working, the connection to the CGI Perl script is not and I always get the error message: "script call was not successful".

Maybe some one can tell me where the mistake is? I'm not completely sure how to return the variable from the Perl script back to the server.

Since I'm still new to both jQuery and JavaScript and haven't worked with asynchronous calls before, any help would be greatly appreciated.

This is my code:

The HTML code: (where the user fills the form with his first name and name:

<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>

The JavaScript Code:

$(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;
  });
});

The Perl code:

#!/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;

atreju over 10 years

Thank you, it works now. I converted the variable to a string for good measure and corrected a typo on top: my $completename = $firstname . $name; my $completename = "$completename"; print $cgi->header('text/plain;charset=UTF-8'); print $completename;
Dave Cross over 10 years

Your code $completename = "$completename" does absolutely nothing useful here at all. Why not just print "$firstname $name";?
atreju over 10 years

You are right, of course. This was just a simple example I needed to get running before adding my real Perl code.