简易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. linux初次入门学习小结

    linux系统目录结构: 通过ls / 命令可以获得linux目录结构 bin boot dev etc home lib lib64 media mnt opt proc root sbin sel ...

  2. 箱线图boxplot

    箱线图boxplot--展示数据的分布 图表作用: 1.反映一组数据的分布特征,如:分布是否对称,是否存在离群点 2.对多组数据的分布特征进行比较 3.如果只有一个定量变量,很少用箱线图去看数据的分布 ...

  3. js 捕捉滚动条事件

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. mysql远程连接 Host * is not allowed to connect to this MySQL server

    mysql -u root -p mysql>use mysql; mysql>update user set host =’%'where user =’root’; mysql> ...

  5. Mac环境 安装brew

    一.brew官网主页上的方法: /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/insta ...

  6. day95

    Linux基本部署配置及常见扩展应用 Linux软件包安装方法 1. 安装: 整个安装过程可以分为以下几步: 1) 取得应用软件:通过下载.购买光盘的方法获得: 2)解压缩文件:一般tar包,都会再做 ...

  7. C# 中的相对路径在 Picturebox 中的应用

    前言 最近的项目需要将 picturebox 显示网络图片的小功能完成,不想用绝对路径取本地文件里的图片,因为将来要发布给用户的话让用户自己配置会很麻烦的,索性将路径设置成相对路径,将图片放在自己的项 ...

  8. NO NEWS IS GOOD NEWS

    从客户那传来一个噩耗:要求每个表单在保存之后,要在页面上弹一个 “ 保存成功 ” 的对话框. 客户代表志得意满地说这样用户体验更好,略带谴责意味地傲娇道,“你们早该想到的”.呵呵…… 可不是嘛,我刚入 ...

  9. Random()种子数

    Random rand =new Random(25); int i; i=rand.nextInt(100); 初始化时25并没有起直接作用,rand.nextInt(100);中的100是随机数的 ...

  10. Contest1692 - 2019寒假集训第三十一场 UPC 11075 Problem D 小P的国际象棋

    非常简单的单点修改+区间加+区间查询.我用的是最近刚学的区间修改版本树状数组.  直接维护即可,注意修改后的单点值已经不是a[i],或者b[i],要通过区间查询求单点.不然是错的. 区间修改版本树状数 ...