JavaScript之简易http接口测试工具网页版

简易http接口测试工具网页版,支持get、post请求,支持json格式消息体,form表单暂不支持。 

httpClient.html

 1 DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>自定义HttpClienttitle>
 7     <link rel='stylesheet prefetch' href='https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css'>
 8     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js">script>
 9     <link rel="stylesheet" href="../css/httpClientStyle.css">
10     <script src="../js/httpclient.js">script>
11 head>
12 <body>
13 <div class="container">
14     <div class="row">
15         <h3 class="page-header">接口测试工具h3>
16         <div>
17             <label>接口地址:label>
18             <input type="text" class="form-control" id="url_input"
19                    value="http://localhost:8080/getStudentByIdWithJson">
20             
21             <div>
22                 <label>接口类型:label>
23                 <select id="type_select" class="selected form-select-button" style="height: 25px">
24                     <option value="GET">GEToption>
25                     <option value="POST" selected>POSToption>
26                 select>
27             div>
28             <label>消息头:label><input type="text" class="form-control" id="header_input" title='{"A":"XX","B":"XX"}'>
29 
30             <label>消息体:label>
31             <div>
32                 <input name="bodyType" type="radio" value="form"> Form 
33                 <input name="bodyType" type="radio" value="json" checked> JSON
34             div>
35             <input type="text" class="form-control" id="body_input" value='{"id":"1"}'>
36         div>
37 
38         <div class="btn-group">
39             <button type="submit" class="btn btn-primary" title="发送消息" onclick="send()">发送button>
40             <button type="reset" class="btn btn-primary" title="刷新页面" onclick="location.reload()">刷新button>
41             <button type="reset" class="btn btn-primary" title="清空查询结果" onclick="clearShowArea()">清空button>
42             <button type="reset" class="btn btn-primary" title="跳转首页" onclick="location.href='/'">首页button>
43         div>
44 
45         <div>
46             <label>返回结果:label>
47             <div class="well">
48                 <p id="showArea">p>
49             div>
50         div>
51     div>
52 
53 div>
54 
55 body>
56 html>

 

httpclient.js

 1 //处理json数据
 2 function getOneByForm() {
 3     var url = $("#url_input").val();
 4     var body = $("#body_input").val();
 5     var type = $("#type_select").val();
 6     var headers = $("#header_input").val();
 7 
 8     $.ajax({
 9         url: url,//请求地址
10         // data: {id: 3},//提交的数据
11         data: body.toString(),//提交的数据
12         contentType: "application/x-www-form-urlencoded; charset=UTF-8",
13         type: type,//提交的方式
14         dataType: "TEXT", //返回类型 TEXT:字符串 JSON XML
15         headers: {headers},
16         success: function (data) { // 校验返回内容,进行跳转
17             //将获取到的数据输出到元素上
18             $("#showArea").text(data);
19             console.log(data);
20         },
21         error: function (xhr) {
22             clearShowArea();
23             // 失败输出HTTP状态码
24             alert("调用失败!HTTP状态码:" + xhr.status);
25         }
26     })
27 }
28 
29 function getOneByJson() {
30     var url = $("#url_input").val();
31     var body = $("#body_input").val();
32     var type = $("#type_select").val();
33     var headers = $("#header_input").val();
34     $.ajax({
35         url: url,//请求地址
36         data: body,//提交的数据
37         contentType: "application/json; charset=utf-8",
38         headers: {headers},
39         type: type,//提交的方式
40         dataType: "TEXT", //返回类型 TEXT:字符串 JSON XML
41         success: function (data) { // 校验返回内容,进行跳转
42             //将获取到的数据输出到元素上
43             $("#showArea").text(data);
44             console.log(data);
45         },
46         error: function (xhr) {
47             clearShowArea();
48             // 失败输出HTTP状态码
49             alert("调用失败!HTTP状态码:" + xhr.status);
50         }
51     })
52 }
53 
54 //  清空结果
55 function clearShowArea() {
56     $("#showArea").empty();
57 }
58 
59 // 发送请求方法入口,判断数据类型分别调用对应方法
60 function send() {
61     var bodyType = $('input:radio[name=bodyType]:checked').val();
62     console.log("bodyType: " + bodyType)
63     if (bodyType == "form") {
64         getOneByForm();
65     } else if (bodyType == "json") {
66         getOneByJson();
67     } else {
68         alert("不支持该类型:" + bodyType)
69     }
70 }
71 
72 function jsonToFormData(json) {
73     var object = JSON.parse(body);
74     var rs = "";
75     object.key(obj).forEach()
76     {
77         rs = {}
78     }
79 }
80 
81 // 跳转首页
82 function toIndex() {
83     window.location.href = '/';
84 }

 

httpClientStyle.css

 1 /*
 2     httpClient demo的样式
 3 */
 4 
 5 label {
 6     /*margin: 10px;*/
 7     margin-top: 12px;
 8     /*margin-bottom: 20px;*/
 9 }
10 
11 div {
12     margin-top: 10px;
13     margin-bottom: 10px;
14 }

 

截图:

JavaScript之简易http接口测试工具网页版_第1张图片

 

转载于:https://www.cnblogs.com/gongxr/p/10402728.html

你可能感兴趣的:(JavaScript之简易http接口测试工具网页版)