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 reply to Re: Simple example of CGI (Perl) + HTML + CSS + Javascript/jQuery + Ajax by rnewsham
in thread Simple example of CGI (Perl) + HTML + CSS + Javascript/jQuery + Ajax by golux

Title:
Use:  <p> text here (a paragraph) </p>
and:  <code> code here </code>
to format your post, it's "PerlMonks-approved HTML":


  • Posts are HTML formatted. Put <p> </p> tags around your paragraphs. Put <code> </code> tags around your code and data!
  • Titles consisting of a single word are discouraged, and in most cases are disallowed outright.
  • Read Where should I post X? if you're not absolutely sure you're posting in the right place.
  • Please read these before you post! —
  • Posts may use any of the Perl Monks Approved HTML tags:
    a, abbr, b, big, blockquote, br, caption, center, col, colgroup, dd, del, details, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, ins, li, ol, p, pre, readmore, small, span, spoiler, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, wbr
  • You may need to use entities for some characters, as follows. (Exception: Within code tags, you can put the characters literally.)
            For:     Use:
    & &amp;
    < &lt;
    > &gt;
    [ &#91;
    ] &#93;
  • Link using PerlMonks shortcuts! What shortcuts can I use for linking?
  • See Writeup Formatting Tips and other pages linked from there for more info.