Using CGI methods to pass a parameter from JavaScript to Perl script over a web server

Question

Wise ones: I am still having extreme troubles with a web application I am building. I am using an APACHE 2 web server. When in localhost, clicking on test.html will pop up a test button which should run the javascript within my .html file.

test.html is as follows:

<!DOCTYPE html>
<html>
<head>
<script>


function loadXMLDoc() {
var xmlhttp;

if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}


xmlhttp.onreadystatechange=function() {
var str, fileNameVar;
fileNameVar = "hello";
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
    str = xmlhttp.responseText;
    alert(str);
    }
}

xmlhttp.open('GET', 'try.pl?name=fileNameVar' + encodeURIComponent(fileNameVar),false);
xmlhttp.send();
}
</script>
</head>
<body>

<h2>Example</h2></div>
<button type="button" onclick="loadXMLDoc()">test</button>

</body>
</html>

This web app has worked before when calling a perl script and printing its return value, but this time I am trying to pass a parameter from the javascript to my perl script [try.pl]. As you see I am trying to pass the variable fileNameVar which will hold a string or an integer.

Here is my perl script, try.pl:

#!C:/indigoampp/perl-5.12.1/bin/perl.exe
use CGI;
use strict;
use warnings;

my $cgi = CGI->new;

my $name = $cgi->param('name');
print "Content-type: text/plain\n\n";
print "$name";

So when the button is pushed in my web app, it should simply create an alert to the user which contains the word "hello".

Though, when I press the button, nothing happens. I don't know what I am doing wrong, as it seems to work for others. Essentially, my web app works but I want to add the functionality of passing a variable from the javascript to the perl script.

NOTE: I do not want to pass "hello" directly in my GET statement. I want it to pass whatever is stored in fileNameVar. Though, in this example, fileNameVar is set to "hello". Thanks for ANY help!

7stud · Accepted Answer · 2014-07-15 16:18:51Z

4

1) Put test.html in the htdocs directory of apache2.
2) Put try.pl in the cgi-bin directory of apache2.
3) Make try.pl executable(which is probably done automatically for you on Windows). On unix, you would write:

.../apache2/cgi-bin$ chmod a+x try.pl

4) Start apache.
5) Request the test.html page by entering the following in your browser:

http://localhost:8080/test.html

(substitute in whatever port apache is listening on)

6) In this line:

xmlhttp.open('GET', 'try.pl?name=fileNameVar' + encodeURIComponent(fileNameVar),false);

...you have a few problems. You defined fileNameVar inside a function, and you are trying to access fileNameVar from outside the function. Variables defined inside a function can only be seen inside that function(exception for things called 'closures', which are functions defined inside other functions).

Secondly, in your example, encodeURIComponent() would return "hello", so your url would look like:

'try.pl?name=fileNameVar'  + 'hello'

or equivalently:

'try.pl?name=fileNameVarhello'

...which is probably not what you want. You want to write:

var fileNameVar = "hello";
....'try.pl?name=' + encodeURIComponent(fileNameVar)

Next, you need to put 'cgi-bin' in the path:

 var fileNameVar = "hello";
 ......'cgi-bin/try.pl?name=' + encodeURIComponent(fileNameVar)

7) In the line:

print "$name";

the quotes don't do anything.

====

.../apache2/htdocs/test.html:

<!DOCTYPE html>
<html>
<head>
<title>Test</title>

<script type="text/javascript">

function loadXMLDoc() 
{
  var xmlhttp;

  if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  }
  else
  {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }


  xmlhttp.onreadystatechange = function() 
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      var str = xmlhttp.responseText;
      alert(str);
    }
  }


  var fileNameVar = "hello"; //LOOK AT ME*******

  xmlhttp.open(
    'GET', 
    'cgi-bin/try.pl?name=' + encodeURIComponent(fileNameVar),
    false
  );

  xmlhttp.send();
}

</script>
</head>
<body>

<h2>Example</h2></div>
<button type="button" onclick="loadXMLDoc()">test</button>

</body>
</html>

...apache2/cgi-bin/try.pl:

#!/usr/bin/env perl

use CGI;
use strict;
use warnings;

my $cgi = CGI->new;

my $name = $cgi->param('name');
print "Content-type: text/plain\n\n";
print $name;

url to enter in your browser:

http://localhost:8080/test.html

(substitute in whatever port you configured apache to listen on--it's specified in .../apache2/conf/httpd.conf)

Then click on the button.

edited Jul 15, 2014 at 16:18

answered Jun 27, 2013 at 20:03

7stud

48.8k14 gold badges107 silver badges136 bronze badges

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

5 Comments

Amanda Kirk Over a year ago

great explanation! I am going to test this out tomorrow. Please stay posted for success or misery stories.

Amanda Kirk Over a year ago

Why do I have to have the perl script in the cgi-bin folder? Everytime I wanted to run a .pl file from my cgi-bin folder, I just moved it to htdocs before. This is still not working :( I did everything you suggested. When I press the event button, nothing occurs.

7stud Over a year ago

You can certainly configure Apache so that it executes files, v. returning their text, for files that are requested from other directories besides cgi-bin. But cgi-bin is the default directory for files you want Apache to execute when they are requested. Did you configure apache to execute certain files in the htdocs directory? I will post all the files I am using.

Amanda Kirk Over a year ago

I configured APACHE to execute all files in my htdocs, so that when I go to localhost on my machine it shows all files in htdocs.

Amanda Kirk Over a year ago

YOUR CODE ABOVE WORKS! Thank you so so so much. It's amazing how much a little tweaking does.

ysth · Accepted Answer · 2013-06-27 19:21:07Z

2

"When in localhost, clicking on test.html" says to me you might be accessing the page with a file: url, which will keep XMLHttpRequest from working.

You also want to use a standard javascript library instead of native XMLHttpRequest calls. Most of the world uses jquery these days.

answered Jun 27, 2013 at 19:21

ysth

99.1k6 gold badges126 silver badges219 bronze badges

Collectives™ on Stack Overflow

Using CGI methods to pass a parameter from JavaScript to Perl script over a web server

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related