简易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. day09--函数的定义分类以及其使用（1）

    一.函数的定义以及分类: 什么是函数:函数是可以重复调用来完成特定功能的代码块.-----(重复利用的工具) """ 1 什么是函数?重复利用的工具————可以完成特定功 ...

  2. Linux系统学习之Linux账号管理

    一.基本介绍 Linux用户分为三类,即普通用户.根用户.系统用户. 普通用户指的是所有使用Linux系统的真实用户. 根用户就是root用户,权限最大,它的ID为0,也被称为超级用户,root用户拥 ...

  3. jenkins+svn安装

    参考资料: http://blog.csdn.net/wuxuehong0306/article/details/50016547 https://www.ibm.com/developerworks ...

  4. Rommel - C# 浅谈 接口(Interface)的作用

    鉴于网上太多太多的对C# 接口的误解,想来想去还是自己做一个完美的接口 篇章 继承"基类"跟继承"接口"都能实现某些相同的功能,但有些接口能够完成的功能是只用基 ...

  5. Python 学习 第十四篇：命名元组

    Python的元组不能为元组内部的数据进行命名,而 collections.namedtuple 可以来构造一个含有字段名称的元组类,命名元组可以通过逗号+字段名来获取元素值: collections ...

  6. 【C#复习总结】细说 Lambda表达式

    1 前言 本系列会将[委托] [匿名方法][Lambda表达式] [泛型委托] [表达式树] [事件]等基础知识总结一下.(本人小白一枚,有错误的地方希望大佬指正) 系类1:细说委托 系类2:细说匿名 ...

  7. .Net高级进阶,教你如何构建企业模型数据拦截层，动态控制字段验证

    现在,你有一个MVC架构的web项目,你要完成一个注册功能. 前台传了3个值到你的控制器,分别是账号.密码.邮箱. 如图:现在你要在控制器里面判断,账号名称.密码.邮箱不能为空,并且名称和密码不超过1 ...

  8. functools下的partial模块应用

    问题 你有一个被其他python代码使用的callable对象,可能是一个回调函数或者是一个处理器, 但是它的参数太多了,导致调用时出错. 解决方案 如果需要减少某个函数的参数个数,你可以使用 fun ...

  9. Leetcode 2. Add Two Numbers(medium)

    You are given two non-empty linked lists representing two non-negative integers. The digits are stor ...

  10. 论一类每次修改log个结点更新的线段树标记方法

    楼房重建(BZOJ2957) 多次询问一个区间中大于区间内这个数之前所有数的数的数量. 每个线段树结点维护该节点的答案c和区间内最大值m.假设有函数get(x,cm)=结点x中答案>cm的长度. ...