简易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. 2017-2018-2 20155314《网络对抗技术》Exp7 网络欺诈防范

    2017-2018-2 20155314<网络对抗技术>Exp7 网络欺诈防范 目录 实验目标 实验内容 实验环境 基础问题回答 预备知识 实验步骤 1 利用setoolkit建立冒名网站 ...

  2. RMAN_RAC归档日志备份包恢复到单机

    恢复归档日志的方法: RAC是ASM的存储且是OMF创建的格式,所以RAC的日志名为如下+ARCH/mioa/archive/1_73554_875548170.dbf.+ARCH/mioa/arch ...

  3. leetcode 344. Reverse String 、541. Reverse String II 、796. Rotate String

    344. Reverse String 最基础的旋转字符串 class Solution { public: void reverseString(vector<char>& s) ...

  4. AI tensorflow MNIST

    MNIST 数据 train-images-idx3-ubyte.gz:训练集图片 train-labels-idx1-ubyte.gz:训练集图片类别 t10k-images-idx3-ubyte. ...

  5. Python3 tkinter基础 Checkbutton variable 多选钮是否被选中

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  6. 蓝牙SDP协议概述

    之前写了一篇 bluedroid对于sdp的实现的源码分析   ,他其实对于sdp 协议本身的分析并不多,而是侧重于 sdp 处于Android bluedroid 架构中的代码流程,这篇文章,是针对 ...

  7. 撒花！中文翻译仓库链接已加入 ML.NET 官方示例网站首页

    从2018年12月02日决定开始做ML.NET 示例中文版https://github.com/feiyun0112/machinelearning-samples.zh-cn,然后以每天一篇的速度进 ...

  8. HBase篇(3)-架构详解

    [每日五分钟搞定大数据]系列,HBase第三篇 聊完场景和数据模型我们来说下HBase的架构,在网上找了张比较清晰的图,我觉得这张图能说明很多问题,那这一篇我们就重点来解析下这张图 角色与职责 先介绍 ...

  9. linux screen 工具

    一.背景 系统管理员经常需要SSH 或者telent 远程登录到Linux 服务器,经常运行一些需要很长时间才能完成的任务,比如系统备份.ftp 传输等等.通常情况下我们都是为每一个这样的任务开一个远 ...

  10. B. Switches and Lamps

    链接 [https://codeforces.com/contest/985/problem/B] 题意 给你n,m,分别是n个开关,m个灯 给一个n*m的字符矩阵aij=1,表示i可以控制j这个灯 ...