简易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接口测试工具网页版的更多相关文章

  1. javascript实现移动端网页版阅读器

    现在手机上的文本阅读app已经非常丰富,良好的阅读体验与海量的书库常常令我感到无比兴奋. 我想到8年前用一点几寸屏幕的mp3看电子书的情景,顿生一种淡淡的温馨.再久远一些,小的时候,我也经常和小伙伴们 ...

  2. 利用 JavaScript SDK 部署网页版“Facebook 登录”

    facebook开发者平台https://developers.facebook.com/ 利用 JavaScript SDK 部署网页版“Facebook 登录” 通过采用 Javascript 版 ...

  3. JavaScript 实现简易版贪吃蛇（Day_13）

    时光永远在变迁,你始终要丢下过去. 使用语言 JavaScript  概述 运用JavaScript  实现简易版<贪吃蛇>.     Html 页面 1 <!DOCTYPE htm ...

  4. Python接口测试实战1（下）- 接口测试工具的使用

    如有任何学习问题,可以添加作者微信:lockingfree 课程目录 Python接口测试实战1(上)- 接口测试理论 Python接口测试实战1(下)- 接口测试工具的使用 Python接口测试实战 ...

  5. 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  6. Remoting接口测试工具

    动手写一个Remoting接口测试工具 基于.NET开发分布式系统,经常用到Remoting技术.在测试驱动开发流行的今天,如果针对分布式系统中的每个Remoting接口的每个方法都要写详细的测试脚本 ...

  7. Dreamweaver杀手！Illustrator终结者？Flash的末日？图形图像设计程序之网页版

    Dreamweaver杀手!Illustrator终结者?Flash的末日?图形图像设计程序之网页版 阅读:  评论:  作者:Rybby  日期:  来源:rybby.com Adobe 家的 Il ...

  8. postman接口测试工具的常规使用

    目录 postman接口测试工具简介与安装 postman发送get请求 JSON数据详解 postman发送post请求 postman中post请求传参说明 postman设置请求的header ...

  9. Springboot整合WebSocket实现网页版聊天，快来围观！

随机推荐

  1. Python 绑定 C，C++ 参考工具介绍

    https://wiki.python.org/moin/IntegratingPythonWithOtherLanguages 完.

  2. JS中caller和callee

    caller: caller是函数对象的一个属性,指的是这个函数对象的调用者,如果调用者,如果是顶层调用者,则返回null. 例: function func(){ console.log(func. ...

  3. HyperLedger Fabric 1.0的Transaction处理流程

    如果把区块链比作一个只能读写,不能删改的分布式数据库的话,那么事务和查询就是对这个数据库进行的最重要的操作.以比特币来说,我们通过钱包或者Blockchain.info进行区块链的查询操作,而转账行为 ...

  4. MvcPager帮助文档 — PagerOptions 类

    http://www.webdiyer.com/mvcpager2/docs/pageroptions/ MvcPager帮助文档 — PagerOptions 类 表示包含MvcPager分页控件相 ...

  5. face recognition[翻译][深度人脸识别:综述]

    这里翻译下<Deep face recognition: a survey v4>. 1 引言 由于它的非侵入性和自然特征,人脸识别已经成为身份识别中重要的生物认证技术,也已经应用到许多领 ...

  6. Vue文件中引入img 路径写法

    把图片路径写在data里面,然后渲染模板的两种方式 方案1.在data使用require将图片进入,写法如下 logo: require('../asset/admin/logo.png')  在模板 ...

  7. Groovy语言学习--语法基础（3）

    侧重点可能是groovy metaClass基元类的概念,有点像java的反射,因为java反射目前基本也没研究过,就mark一下,后续若有用到就深入研究一下. 基础语法的东西貌似差不多八九不离十了, ...

  8. Windows Community Toolkit 4.0 - DataGrid - Part03

    概述 在上面一篇 Windows Community Toolkit 4.0 - DataGrid - Part02 中,我们针对 DataGrid 控件的 Utilities 部分做了详细分享.而在 ...

  9. POST BOY : Restful API 调试工具

    在使用asp.net webapi开发中,一般情况下会使用一些工具来模拟请求. 其中有一款chrome浏览器插件POST MAN比较不错. 但是由于国内google服务使用不稳定,所以我自己写了一个简 ...

  10. Centos7之Systemd(Service文件)详解

    一.开机启动 对于那些支持 Systemd 的软件,安装的时候,会自动在/usr/lib/systemd/system目录添加一个配置文件. 如果你想让该软件开机启动,就执行下面的命令(以httpd. ...