Re: 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]

Comment on Re: Simple example of CGI (Perl) + HTML + CSS + Javascript/jQuery + Ajax Select or Download Code

Replies are listed 'Best First'.
Re^2: Simple example of CGI (Perl) + HTML + CSS + Javascript/jQuery + Ajax by Anonymous Monk on Oct 11, 2014 at 19:51 UTC
+1 to renewsham. The simple example is much easier to read and use. Plus, you adroitly used Template to ease reading of the example, and demonstrate a better way to write HTML.	[reply]
Re^2: Simple example of CGI (Perl) + HTML + CSS + Javascript/jQuery + Ajax by golux (Chaplain) on Aug 26, 2013 at 14:52 UTC
Gotta say, I'm not impressed. The point of my example was to illustrate Perl and jQuery. To that end, I'm intentionally showing how much you can do in a small number of lines of code. I realize JSON and the Template Toolkit are very useful -- I frequently use both for adding features to Bugzilla at work -- but there wasn't any need for them in an example specifically limited to Perl and jQuery. On top of that, by "dumbing down" the functionality, your example does nothing more than calculate whether a number is even or odd. You can do that on the client in javascript; why would you need jQuery, Ajax, JSON, the Template Toolkit and a call to the server for that?! say substr+lc crypt(qw $i3 SI$),4,5	[reply]
Re^3: Simple example of CGI (Perl) + HTML + CSS + Javascript/jQuery + Ajax by rnewsham (Curate) on Aug 26, 2013 at 16:03 UTC
I appreciate the point of your example, and it does do what you intended. However I believe its complexity could be daunting for a newcomer to perl, jquery or ajax in general. In my experience people who ask the question of how do I use X with Y want to see the most basic example of the core workings that they can apply to their own problem. They do not want to have to take a working example of hundreds of lines and have to strip out what is irrelevant to them. My example was not intended to do anything useful, interesting or impressive. It is purely a concise example of a jquery perl work flow. It was designed to be simple with only two files involved the one with the jquery and the one with the perl. That way the work flow can be easily tracked. As a demonstration to someone with limited prior knowledge of how jquery and perl can be used together, I do not believe that it needs to do any more. Template Toolkit was used as it keeps the html out of the perl and allows for the html output to be understood without executing any perl. JSON was used because I have found that this is by far the simplest way for perl to pass data back to jquery.	[reply]
Re^4: Simple example of CGI (Perl) + HTML + CSS + Javascript/jQuery + Ajax by Anonymous Monk on Jan 15, 2014 at 17:04 UTC
I agree with you man, I really appreciate you dumbed down version. Even if it does just calculate something Javascript could do, it's a less daunting place for me to start. Many thanks!	[reply]
Re^3: Simple example of CGI (Perl) + HTML + CSS + Javascript/jQuery + Ajax by Anonymous Monk on Aug 26, 2013 at 21:36 UTC
Maybe you want to get rid of `qw{ :standard };`	[reply] [d/l]
Re^2: Simple example of CGI (Perl) + HTML + CSS + Javascript/jQuery + Ajax by simplitia1 (Initiate) on Mar 26, 2014 at 00:08 UTC
Hi I like this example, is there any way to have both the HTML and cgi code in one file. For example have the script generate both the html and ajax call? I tried doing it but got stuck when I try but got stuck at the example where it outputs the data, `$tt->process('simple.tmpl', \%data);` I tried replacing simple.tmpl with simple.cgi but it did not work. thanks.	[reply] [d/l]
Re^3: Simple example of CGI (Perl) + HTML + CSS + Javascript/jQuery + Ajax by Your Mother (Archbishop) on Mar 26, 2014 at 00:25 UTC
Here�s an old minimal standalone: CGI/Ajax example: lookup a value when a field is filled in.	[reply]
Re^3: Simple example of CGI (Perl) + HTML + CSS + Javascript/jQuery + Ajax by Anonymous Monk on Mar 26, 2014 at 00:10 UTC
See http://search.cpan.org/perldoc/Template#process($template,_\%vars,_$output,_%options) and make give it a string reference like \$template_text_not_filename_no_more	[reply]


Perl-Sensitive Sunglasses
	PerlMonks