comment on

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

Are you posting in the right place? Check out Where do I post X? to know for sure.
Posts may use any of the Perl Monks Approved HTML tags. Currently these include the following:
<code> <a> <b> <big> <blockquote> <br /> <dd> <dl> <dt> <em> <font> <h1> <h2> <h3> <h4> <h5> <h6> <hr /> <i> <li> <nbsp> <ol> <p> <small> <strike> <strong> <sub> <sup> <table> <td> <th> <tr> <tt> <u> <ul>
Snippets of code should be wrapped in <code> tags not <pre> tags. In fact, <pre> tags should generally be avoided. If they must be used, extreme care should be taken to ensure that their contents do not have long lines (<70 chars), in order to prevent horizontal scrolling (and possible janitor intervention).
Want more info? How to link or How to display code and escape characters are good places to start.


The stupid question is the question not asked
	PerlMonks