Webpage javascript askes server script for information to fill first drop down.

Server Script responds with an xml document.

Webpage Javascript parses information and displays in second Dropdown list

Process is repeated for the third dropdown list.

Is this what the JSON module would do for me?

Is it possible to setup the web-page to handle multiple sets of the dropdown lists? 10 for example? (I have found a method that the other 9 would not show up until the first is filled)

Can you provide an example of it working?

thanks for your help

Sorry I should've said this earlier. JSON is more like an alternative to XML. To use JSON here's an example from a perl script called from an XMLHttpRequest. That's basically your standard AJAX technique.

This method is described here. If you were still interested in trying an XML solution you can look here. Granted that's a php solution, but you'd just print out the XML as i do in the first snipet of code with the JSON.

all in all it's just a matter of getting a string back from your perl script. Then using the request.responseText. Then doing whatever you want to that string; whether it's parsing XML or evaluating it to create a JavaScript Object. If your giving a string to your perl script, that's when you might use the JSON module to interpret the string into a perl object. If you still wanted to go the XML route, it's pretty much the same concept, except use an XML module to create/dump perl object from/to XML, then have the JavaScript interpret it. Looks like there's plenty XML modules on CPAN. Hope this helps.

Employee.pcgi

in this @employees is just an array of hashes

#header required to properly recieve text/html response
print "Content-type: text/html\n\n";

print '{"employees" : [' . "\n";

foreach my $employee(@employees) {
print '
   {
      "name" : "' . $employee->{name} . '",' . "\n" .
      '"company" : "' . $employee->{company} . '",' . "\n" .
      '"email" : "' . $employee->{email} . '",' . "\n" .
      '"website" : "' . $employee->{website} . '"'. "\n" .
  '},'
}

print ']}';
[download]


And here's what the javascript might look like.

employee.js


//loading XML (JSON) data 
function loadXML(url)
{
   //creating XMLHttpRequest Object... IE Only 
   try{ 
      req = new ActiveXObject("Msxml2.XMLHTTP");
   } 
   catch(e) { 
      try {  
         req = new ActiveXObject("Microsoft.XMLHTTP");
      } 
      catch (e) { 
         req = false; 
      } 
   } 
 
   alert('contacting ' + url);
 
   //opening url
   req.open("GET",url, true);
   
   //when data is recieved, goto popuplate_list() 
   req.onreadystatechange=populate_list;

   //GET method, send null 
   req.send(null); 
} 

//populates a JSON object of employees 
function populate_list() 
{
   //response completed 
   if(req.readyState == 4)
   {
      //response ok 
      if(req.status == 200)
      {
         //evaluate string into a JSON object 
         var records = eval('('+req.responseText+')'); 

         //display records
         show_list(records);
      }
   }
}

//showing employees
function show_list(records)
{
   var size = records.employees.length;
   var employee_list = records.employees;
   for(var i=0; i<size; i++)
   {
         alert('Name ' + employee_list[i].name + '\n' +
               'Company ' + employee_list[i].company + '\n' +
          'Email ' + employee_list[i].email + '\n' +
          'Website ' + employee_list[i].website);
   }
}

//contacting perl script
loadXML('../backend/script/employee.pcgi');
[download]