CODEWITHSUNDEEP
javascriptperlapachecgi
Amanda Kirk
Amanda Kirk

Reputation: 78

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

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!

Upvotes: 0

Views: 5641

Answers (2)

7stud
7stud

Reputation: 48649

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.

Upvotes: 4

ysth
ysth

Reputation: 98508

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

Upvotes: 2

Related Questions