Re: Simple example of CGI (Perl) + HTML + CSS + Javascript/jQuery + Ajax

in reply to Simple example of CGI (Perl) + HTML + CSS + Javascript/jQuery + Ajax

I like your example but I think some people may get a little confused by the amount it does. I have taken your idea and created a very basic example. It does not do anything as interesting but it does show how a simple jquery ajax call can be used with perl.

The example consists of two files the cgi and the template. The template contains a jquery function to post a number to the cgi. The cgi will return a json formatted result which jquery will place in a div.

simple.cgi

#!/usr/bin/perl

use strict;
use warnings;

use CGI;
use JSON;
use Template;

my $q = new CGI;
my %data;

if ( my $number = $q->param('number') )
{
    if ( $number =~ /^\d+$/ )
    {
        $data{result} = $number % 2 ? 'odd' : 'even';
    }
    else
    {
        $data{result} = 'Not a number';
    }

    print $q->header('application/json');
    print to_json(\%data);
    exit;
}

$data{title} = 'Simple jquery example';

print $q->header( -charset=>'utf-8' );
my $tt = Template->new;
$tt->process('simple.tmpl', \%data);
[download]

simple.tmpl

<!DOCTYPE html>
<html>
    <head>
        <title>[% title %]</title> 
        <meta charset='utf-8' />
        <script type='text/javascript' src='//ajax.googleapis.com/ajax
+/libs/jquery/1.10.2/jquery.min.js'></script>
    </head>
    <body>
        <div id='result'></div>
        Enter number: <input type='text' id='number' />
        <button onclick='test_number();'>Test</button>

        <script>
            function test_number()
            {
                $.ajax({
                        type: 'POST',
                        url: 'simple.cgi',
                        data: { 'number': $('#number').val() },
                        }).done(function( msg ) {
                                                    $('#result').html(
+ msg.result );
                                                });
            }
        </script>
    </body>
</html>
[download]

In Section Cool Uses for Perl