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

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

httpClient.html

 <!DOCTYPE html>

 <html lang="en">

 <!--模仿postman编写一个简易的http接口测试工具-->

 <head>

     <meta charset="UTF-8">

     <title>自定义HttpClient</title>

     <link rel='stylesheet prefetch' href='https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css'>

     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

     <link rel="stylesheet" href="../css/httpClientStyle.css">

     <script src="../js/httpclient.js"></script>

 </head>

 <body>

 <div class="container">

     <div class="row">

         <h3 class="page-header">接口测试工具</h3>

         <div>

             <label>接口地址:</label>

             <input type="text" class="form-control" id="url_input"

                    value="http://localhost:8080/getStudentByIdWithJson">

             <!--<label>接口类型:</label><input type="text" class="form-control" id="type_input" value='POST'>-->

             <div>

                 <label>接口类型:</label>

                 <select id="type_select" class="selected form-select-button" style="height: 25px">

                     <option value="GET">GET</option>

                     <option value="POST" selected>POST</option>

                 </select>

             </div>

             <label>消息头:</label><input type="text" class="form-control" id="header_input" title='{"A":"XX","B":"XX"}'>

             <label>消息体:</label>

             <div>

                 <input name="bodyType" type="radio" value="form">&nbspForm&emsp;

                 <input name="bodyType" type="radio" value="json" checked>&nbspJSON

             </div>

             <input type="text" class="form-control" id="body_input" value='{"id":"1"}'>

         </div>

         <div class="btn-group">

             <button type="submit" class="btn btn-primary" title="发送消息" onclick="send()">发送</button>

             <button type="reset" class="btn btn-primary" title="刷新页面" onclick="location.reload()">刷新</button>

             <button type="reset" class="btn btn-primary" title="清空查询结果" onclick="clearShowArea()">清空</button>

             <button type="reset" class="btn btn-primary" title="跳转首页" onclick="location.href='/'">首页</button>

         </div>

         <div>

             <label>返回结果:</label>

             <div class="well">

                 <p id="showArea"></p>

             </div>

         </div>

     </div>

 </div>

 </body>

 </html>

httpclient.js

 //处理json数据

 function getOneByForm() {

     var url = $("#url_input").val();

     var body = $("#body_input").val();

     var type = $("#type_select").val();

     var headers = $("#header_input").val();

     $.ajax({

         url: url,//请求地址

         // data: {id: 3},//提交的数据

         data: body.toString(),//提交的数据

         contentType: "application/x-www-form-urlencoded; charset=UTF-8",

         type: type,//提交的方式

         dataType: "TEXT", //返回类型 TEXT：字符串 JSON XML

         headers: {headers},

         success: function (data) { // 校验返回内容，进行跳转

             //将获取到的数据输出到元素上

             $("#showArea").text(data);

             console.log(data);

         },

         error: function (xhr) {

             clearShowArea();

             // 失败输出HTTP状态码

             alert("调用失败！HTTP状态码：" + xhr.status);

         }

     })

 }

 function getOneByJson() {

     var url = $("#url_input").val();

     var body = $("#body_input").val();

     var type = $("#type_select").val();

     var headers = $("#header_input").val();

     $.ajax({

         url: url,//请求地址

         data: body,//提交的数据

         contentType: "application/json; charset=utf-8",

         headers: {headers},

         type: type,//提交的方式

         dataType: "TEXT", //返回类型 TEXT：字符串 JSON XML

         success: function (data) { // 校验返回内容，进行跳转

             //将获取到的数据输出到元素上

             $("#showArea").text(data);

             console.log(data);

         },

         error: function (xhr) {

             clearShowArea();

             // 失败输出HTTP状态码

             alert("调用失败！HTTP状态码：" + xhr.status);

         }

     })

 }

 //  清空结果

 function clearShowArea() {

     $("#showArea").empty();

 }

 // 发送请求方法入口，判断数据类型分别调用对应方法

 function send() {

     var bodyType = $('input:radio[name=bodyType]:checked').val();

     console.log("bodyType: " + bodyType)

     if (bodyType == "form") {

         getOneByForm();

     } else if (bodyType == "json") {

         getOneByJson();

     } else {

         alert("不支持该类型：" + bodyType)

     }

 }

 function jsonToFormData(json) {

     var object = JSON.parse(body);

     var rs = "";

     object.key(obj).forEach()

     {

         rs = {}

     }

 }

 // 跳转首页

 function toIndex() {

     window.location.href = '/';

 }

httpClientStyle.css

 /*

     httpClient demo的样式

 */

 label {

     /*margin: 10px;*/

     margin-top: 12px;

     /*margin-bottom: 20px;*/

 }

 div {

     margin-top: 10px;

     margin-bottom: 10px;

 }

截图：

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