JavaScript之簡易http接口測試工具網頁版

本文轉載自查看原文 2019-02-19 18:06 1865 JavaScript

簡易http接口測試工具網頁版，支持get、post請求，支持json格式消息體，form表單暫不支持。

httpClient.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <!--模仿postman編寫一個簡易的http接口測試工具-->
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>自定義HttpClient</title>
 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             <!--<label>接口類型:</label><input type="text" class="form-control" id="type_input" value='POST'>-->
21             <div>
22                 <label>接口類型:</label>
23                 <select id="type_select" class="selected form-select-button" style="height: 25px">
24                     <option value="GET">GET</option>
25                     <option value="POST" selected>POST</option>
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">&nbspForm&emsp;
33                 <input name="bodyType" type="radio" value="json" checked>&nbspJSON
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 }

截圖：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 http接口測試工具——RESTClient HTTP接口測試工具Postman 接口測試工具 http接口測試工具 REST Client 在線HTTP接口POST請求測試工具類似Postman在線網頁版 Mock API Android iOS 接口測試工具Jmeter 接口測試工具postman JSON接口測試工具接口測試工具——postman Web接口測試工具--Jmeter