JavaScript之简易http接口测试工具网页版
简易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"> 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 }
截图：
