There is no convenient way (that I'm aware off) to interweave Perl and Javascript to make the RPC transparent.
CGI::Ajax does this, although it seems to be looked down on as somewhat inefficient because it inserts the necessary javascript to stitch the Perl and JS halves together into the <head> of each page rather than providing a cacheable .js file.

The basic technique for using CGI::Ajax is that you define sub my_ajax_function normally in Perl, then insert the javascript my_ajax_function(['input_div'], ['output_div']); into your HTML page. When the js function call executes, CGI::Ajax passes the content of input_div off via AJAX call, which CGI::Ajax intercepts and directs to the Perl sub, then the Perl sub's output is sent back in the AJAX response and inserted into output_div. You can also adjust the javascript function call to pass multiple input/output divs or to send the output into another javascript function if you don't want to just replace a div's content with it.

Very slick and easy as can be if you're willing to accept the bloat that it inserts into the page headers.

Of course, all that you said regarding making the page usable without javascript first still applies.

In reply to Re^2: jQuery and Perl by dsheroh
in thread jQuery and Perl by sierpinski

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.