robert@0
|
1 #!C:/strawberry/perl/bin/perl.exe
|
robert@0
|
2 use strict;
|
robert@0
|
3 use CGI::Ajax;
|
robert@0
|
4 use CGI;
|
robert@0
|
5
|
robert@0
|
6 my $q = new CGI;
|
robert@0
|
7
|
robert@0
|
8 my $Show_Form = sub {
|
robert@0
|
9 my $html = "";
|
robert@0
|
10 $html .= <<EOT;
|
robert@0
|
11 <HTML>
|
robert@0
|
12 <HEAD><title>CGI::Ajax JSON Example</title>
|
robert@0
|
13 <script>
|
robert@0
|
14 handle_return = function(vv){
|
robert@0
|
15 document.getElementById('object_display').innerHTML = vv;
|
robert@0
|
16 eval(vv); // this gives you 'var jsonObj' here in javascript;
|
robert@0
|
17 // alert(jsonObj);
|
robert@0
|
18 var div = document.getElementById('parsed');
|
robert@0
|
19 div.innerHTML = "</b>key : value<b><br/>";
|
robert@0
|
20 for(var key in jsonObj){
|
robert@0
|
21 div.innerHTML += key + " => " + jsonObj[key] + "<br/>";
|
robert@0
|
22 }
|
robert@0
|
23
|
robert@0
|
24 }
|
robert@0
|
25 </script>
|
robert@0
|
26 </HEAD>
|
robert@0
|
27 <BODY>
|
robert@0
|
28 <H2> Get The Letter Following the One you Enter </H2>
|
robert@0
|
29 <form>
|
robert@0
|
30 Enter Number:
|
robert@0
|
31 <input type="text" id="val1" size="6" value='abc' onkeyup="json(['val1'], [handle_return]);">
|
robert@0
|
32 <br/><br/>The JavaScript Object:<br/>
|
robert@0
|
33 <div id="object_display" style="width:500px;height:200px;">
|
robert@0
|
34
|
robert@0
|
35 </div>
|
robert@0
|
36 <br/> After Parsing (use eval) <br/>
|
robert@0
|
37 <div id="parsed" style="width:500px;height:200px;">
|
robert@0
|
38
|
robert@0
|
39 </div>
|
robert@0
|
40
|
robert@0
|
41 </form>
|
robert@0
|
42 </BODY>
|
robert@0
|
43 </HTML>
|
robert@0
|
44 EOT
|
robert@0
|
45
|
robert@0
|
46 return $html;
|
robert@0
|
47 };
|
robert@0
|
48
|
robert@0
|
49 my $pjx = CGI::Ajax->new('json' => 'pjx_JSON_out.pl');
|
robert@0
|
50 $pjx->JSDEBUG(1);
|
robert@0
|
51 $pjx->DEBUG(1);
|
robert@0
|
52 print $pjx->build_html($q,$Show_Form); # this outputs the html for the page
|