CODEWITHSUNDEEP
javascriptjqueryajaxperl
atreju
atreju

Reputation: 995

Pass data to CGI script and back with jQuery.ajax

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;

Upvotes: 3

Views: 16698

Answers (1)

daxim
daxim

Reputation: 39158

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.

Upvotes: 7

Related Questions