Pass data to CGI script and back with jQuery.ajax

Question

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;

daxim · Accepted Answer · 2013-08-28 10:57:08Z

7

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.

answered Aug 28, 2013 at 10:57

daxim

39.3k4 gold badges71 silver badges135 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

atreju Over a year ago

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 a year ago

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

atreju Over a year ago

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

Collectives™ on Stack Overflow

Pass data to CGI script and back with jQuery.ajax

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related