Hi stuckdev,

Here's a fairly simple example that should do the basics of what you want: 

#!/usr/bin/perl -w

###############
## Libraries ##
###############
use strict;
use warnings;
use CGI;
use CGI::Carp qw{ fatalsToBrowser };
use JSON;


##################
## User-defined ##
##################
my $jquery = "//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.
+js";


##################
## Main program ##
##################
my $query = new CGI;
my $url   = $query->url;

my $txt_content = $query->param("txt_content") || "";
if ($txt_content) {
    handle_server_side_ajax($txt_content);
    exit;
}

print_html();


#################
## Subroutines ##
#################
sub handle_server_side_ajax {
    my ($text) = @_;

    print "Content-type:  application/json\n\n";

    # Do something with $text ...
    my $result = "You said '$text'";
    my $time   = localtime(time());

    my $h_json = { 'result' => $result, 'time' => $time };

    my $output = to_json($h_json);
    print $output;
}


sub print_html {
    print "Content-type:  text/html\n\n";

    print qq{
        <script src="$jquery" type="text/javascript"></script>
        <script type="text/javascript">
            var J = jQuery.noConflict();

            function ajax_text() {
                var input = J('#text_input').val();
                J.ajax({
                  url:      "$url",
                  cache:    false,
                  dataType: 'json',
                  data:     { txt_content: input },
                  success:  function(json) {
                    handle_ajax_output(json);
                  }
                });
            }

            function handle_ajax_output(json) {
              var result = json.result;
              var time   = json.time;
              var text   = "<br>Time: " + time + " &nbsp; Result: " + 
+result;
              J('#html_result').append(text);
            }
        </script>

        <body style="background:cyan">
            <h2>JQuery Example</h2>

            <br>Enter Text and click Submit
            <br>
              <input id="text_input">
              <input type="button" value="Submit" onclick="ajax_text()
+">

            <br><br>
               <h5>Ajax Results Below</h5>
               <pre id="html_result" style="background:#ffef9f">
               </pre>
        </body>
    };
}

[download]

Note that I used "var J = jQuery.noConflict();" so that I could type: 

    var input = J('#text_input').val();

[download]

without having to escape the usual '$' variable of jQuery. Otherwise I'd have had to do: 

    var input = \$('#text_input').val();

[download]

My guess is that you were getting a blank page because you didn't print the headers properly. For the server-side ajax, you need to at least print something like: 

    print "Content-type:  text/html\n\n";

[download]

Or, what I usually use: 

    print "Content-type:  application/json\n\n";

[download]

If you have access to your httpd logs (for example, in Linux they might be in "/var/log/httpd"), take a look at "access_log" (to see if the server-side code was called), and "error_log" (to see whether there were problems).

By the way, you don't have to use jQuery to do what you're trying to do, but it does make it a lot easier (especially things like Ajax, which are greatly simplified by jQuery).

Let me know if you have any questions about my code, and I'll be happy to elaborate further.

say  substr+lc crypt(qw $i3 SI$),4,5

In reply to Re: Post from jQuery to Perl - can't access parameters by golux
in thread Post from jQuery to Perl - can't access parameters by stuckdev

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.