Skip to content

Commit 1595579

Browse files
TommyLemonTommyLemon
committed
新增在线测试html
1 parent 167d1d5 commit 1595579

File tree

1 file changed

+147
-0
lines changed

1 file changed

+147
-0
lines changed

‎APIJSON-JavaScript/index.html‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
5+
<script type="text/javascript" src="apijson.js"></script>
6+
<title>APIJSON Test</title>
7+
<style type="text/css">
8+
html,body,div{
9+
width: 100%;
10+
height:100%;
11+
position:relative;
12+
margin:0;
13+
padding:0;
14+
}
15+
.match{
16+
width: 100%;
17+
height:100%;
18+
margin: 0;
19+
padding:0;
20+
}
21+
.title{
22+
width: 100%;
23+
height:100px;
24+
margin-top: 2%;
25+
margin-bottom: 2%;
26+
padding:0;
27+
}
28+
.center{
29+
width: 100%;
30+
height: 60%;
31+
margin: 0;
32+
padding:0;
33+
}
34+
.bottom{
35+
width: 100%;
36+
height:50px;
37+
margin: 0;
38+
padding:0;
39+
}
40+
.horizontal{
41+
width: 49%;
42+
height:100%;
43+
margin: 0;
44+
padding:0;
45+
}
46+
.url{
47+
width: 75%;
48+
height:50px;
49+
margin: 0;
50+
padding:0;
51+
}
52+
.button{
53+
width: 24%;
54+
height:50px;
55+
margin: 0;
56+
padding:0;
57+
}
58+
</style>
59+
</head>
60+
<body>
61+
<div class="match">
62+
<h1 class="title" align="center">APIJSON Test</h1>
63+
<div class="center" aria-orientation="horizontal">
64+
<textarea class="horizontal" height="500px" width="800px" id="input" onkeyup="javascript:onChange()">
65+
{
66+
"[]":{
67+
"User":{
68+
"sex":1
69+
}
70+
}
71+
}
72+
</textarea>
73+
<textarea class="horizontal" height="500px" width="800px" id="output">
74+
initializing...
75+
</textarea>
76+
</div>
77+
<div class="bottom" aria-orientation="horizontal">
78+
<input class="url" type="text" placeholder="input url here" id="url" />
79+
<button class="button" id="ok" onclick="javascript:send()">Send</button>
80+
</div>
81+
</div>
82+
<script >
83+
var input = document.getElementById("input");
84+
var output = document.getElementById("output");
85+
var url = document.getElementById("url");
86+
var ok = document.getElementById("ok");
87+
88+
url.value = new String(url_get);
89+
90+
var inputted;
91+
var handler;
92+
/**计时回调
93+
*/
94+
function handle(before) {
95+
if (inputted != before) {
96+
clearTimeout(handler);
97+
return;
98+
}
99+
100+
//格式化输入代码
101+
try {
102+
input.value = format(input.value);
103+
ok.disabled = false;
104+
output.value = "OK, click [Send] button to send a request";
105+
} catch(e) {
106+
console.log(e);
107+
ok.disabled = true;
108+
output.value = "Error! Please check and modify JSON request!";
109+
}
110+
}
111+
112+
/**输入内容改变
113+
*/
114+
function onChange() {
115+
inputted = new String(input.value);
116+
clearTimeout(handler);
117+
118+
handler = setTimeout(function () {
119+
handle(inputted);
120+
}, 2*1000);
121+
}
122+
onChange();
123+
124+
125+
/**发送请求
126+
*/
127+
function send() {
128+
clearTimeout(handler);
129+
130+
var json = JSON.parse(input.value);
131+
132+
output.value = "requesting...";
133+
var rq = request(url.value, json, true, function () {
134+
if (rq.readyState !== 4) {
135+
return;
136+
}
137+
138+
if (rq.status === 200) {
139+
output.value = format(rq.responseText);
140+
} else {
141+
output.value = "Response(GET):\nurl = " + rq.url + "\nstatus = " + rq.status + "\nerror = " + rq.error;
142+
}
143+
});
144+
}
145+
</script>
146+
</body>
147+
</html>

0 commit comments

Comments
 (0)