c_cgi_query/index.html at master · mikejsutherland/c_cgi_query · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>C/CGI Test Form</title>

    <script type="text/javascript" src="docs/include/jquery/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="docs/include/jquery-json/jquery.json-2.4.js"></script>

	<style type="text/css">
		body { font-family: "Segoe UI", Frutiger,Tahoma,Helvetica,"Helvetica Neue", Arial, sans-serif; font-size: 12px; }
		textarea#data { border: 1px solid #ccc; width: 99%; height: 200px; }
		button, select { width: 78px; height: 22px; }
		select { position: absolute; margin-left: 6px; text-align: center; padding-top: 2px; }
		#spinner { background: url('docs/images/spinner.gif') no-repeat center center; height: 22px; width: 80px; margin: 1px; float: left; }
		#response { border: 1px dotted #ccc; font-family: monospace; white-space: pre-wrap; width: 99%; }
	</style>

	<script type="text/javascript">

		$(document).ready(function() {

			$("button#clear").click(function() {
				reset();
			});

			$("textarea#data").focus(function() {
				if ( $(this).css('background-color').length > 0 ) {
					$("textarea#data").css("background-color","");
					$("textarea#data").css({ "border-color": "#ccc" });
				}
			});

			$("button#submit").click(function() {

				$("div#spinner").show();
				$("button#submit").hide();
				$("div#response").html('&nbsp;');

				var postdata;
				try {
					postdata = $.param( $.secureEvalJSON( $("textarea#data").val() ) );
				}
				catch (e) {
					reset();
					$("textarea#data").css({ "border-color": "#cc000d" });
					$("textarea#data").css({ "background-color": "#fbaaac" });
					$("div#response").html("JSON error: "+e);
					return;
				}

			    $.ajax({
			        type: $("select#submittype").val(),
			        url: "cgi-bin/c_cgi_query.cgi",
			        data: postdata,
			        timeout: 30000,
			        context: this,
			        complete: function() {
			            $("div#spinner").hide();
			            $("button#submit").show();
			        },
			        error: function( objAJAXRequest, strError, errorThrown ) {
			            $("div#response").html(strError);
			        },
			        success: function(data, textStatus, jqXHR) {
			            $("div#response").html(data);
			        }
			    });
			});

		});

		function reset() {
			$("textarea#data").css("background-color","");
			$("textarea#data").css({ "border-color": "#ccc" });
			$("div#response").html('&nbsp;');
			$("div#spinner").hide();
			$("button#submit").show();
		}

	</script>

</head>
<body>

	JSON:
	<textarea id="data">
{
   "test1": 123,
   "test2": "four",
   "test3": 56789
}
	</textarea>
	<br />

	<button id="submit">SUBMIT</button>
	<button id="clear">CLEAR</button>
	<select id="submittype"><option value="post">POST</option><option value="get">GET</option></select>
	<div id="spinner" style="display: none;">&nbsp;</div>
	<br />

	<br style="clear: both;" />
	Response:
	<div id="response">&nbsp;</div>

</body>
</html>