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

httpClient.html

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <!--模仿postman编写一个简易的http接口测试工具-->
  4.  <head>
  5.      <meta charset="UTF-8">
  6.      <title>自定义HttpClient</title>
  7.      <link rel='stylesheet prefetch' href='https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css'>
  8.      <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  9.      <link rel="stylesheet" href="../css/httpClientStyle.css">
  10.      <script src="../js/httpclient.js"></script>
  11.  </head>
  12.  <body>
  13.  <div class="container">
  14.      <div class="row">
  15.          <h3 class="page-header">接口测试工具</h3>
  16.          <div>
  17.              <label>接口地址:</label>
  18.              <input type="text" class="form-control" id="url_input"
  19.                     value="http://localhost:8080/getStudentByIdWithJson">
  20.              <!--<label>接口类型:</label><input type="text" class="form-control" id="type_input" value='POST'>-->
  21.              <div>
  22.                  <label>接口类型:</label>
  23.                  <select id="type_select" class="selected form-select-button" style="height: 25px">
  24.                      <option value="GET">GET</option>
  25.                      <option value="POST" selected>POST</option>
  26.                  </select>
  27.              </div>
  28.              <label>消息头:</label><input type="text" class="form-control" id="header_input" title='{"A":"XX","B":"XX"}'>
  29.  
  30.              <label>消息体:</label>
  31.              <div>
  32.                  <input name="bodyType" type="radio" value="form">&nbspForm&emsp;
  33.                  <input name="bodyType" type="radio" value="json" checked>&nbspJSON
  34.              </div>
  35.              <input type="text" class="form-control" id="body_input" value='{"id":"1"}'>
  36.          </div>
  37.  
  38.          <div class="btn-group">
  39.              <button type="submit" class="btn btn-primary" title="发送消息" onclick="send()">发送</button>
  40.              <button type="reset" class="btn btn-primary" title="刷新页面" onclick="location.reload()">刷新</button>
  41.              <button type="reset" class="btn btn-primary" title="清空查询结果" onclick="clearShowArea()">清空</button>
  42.              <button type="reset" class="btn btn-primary" title="跳转首页" onclick="location.href='/'">首页</button>
  43.          </div>
  44.  
  45.          <div>
  46.              <label>返回结果:</label>
  47.              <div class="well">
  48.                  <p id="showArea"></p>
  49.              </div>
  50.          </div>
  51.      </div>
  52.  
  53.  </div>
  54.  
  55.  </body>
  56.  </html>

httpclient.js

  1.  //处理json数据
  2.  function getOneByForm() {
  3.      var url = $("#url_input").val();
  4.      var body = $("#body_input").val();
  5.      var type = $("#type_select").val();
  6.      var headers = $("#header_input").val();
  7.  
  8.      $.ajax({
  9.          url: url,//请求地址
  10.          // data: {id: 3},//提交的数据
  11.          data: body.toString(),//提交的数据
  12.          contentType: "application/x-www-form-urlencoded; charset=UTF-8",
  13.          type: type,//提交的方式
  14.          dataType: "TEXT", //返回类型 TEXT：字符串 JSON XML
  15.          headers: {headers},
  16.          success: function (data) { // 校验返回内容，进行跳转
  17.              //将获取到的数据输出到元素上
  18.              $("#showArea").text(data);
  19.              console.log(data);
  20.          },
  21.          error: function (xhr) {
  22.              clearShowArea();
  23.              // 失败输出HTTP状态码
  24.              alert("调用失败！HTTP状态码：" + xhr.status);
  25.          }
  26.      })
  27.  }
  28.  
  29.  function getOneByJson() {
  30.      var url = $("#url_input").val();
  31.      var body = $("#body_input").val();
  32.      var type = $("#type_select").val();
  33.      var headers = $("#header_input").val();
  34.      $.ajax({
  35.          url: url,//请求地址
  36.          data: body,//提交的数据
  37.          contentType: "application/json; charset=utf-8",
  38.          headers: {headers},
  39.          type: type,//提交的方式
  40.          dataType: "TEXT", //返回类型 TEXT：字符串 JSON XML
  41.          success: function (data) { // 校验返回内容，进行跳转
  42.              //将获取到的数据输出到元素上
  43.              $("#showArea").text(data);
  44.              console.log(data);
  45.          },
  46.          error: function (xhr) {
  47.              clearShowArea();
  48.              // 失败输出HTTP状态码
  49.              alert("调用失败！HTTP状态码：" + xhr.status);
  50.          }
  51.      })
  52.  }
  53.  
  54.  //  清空结果
  55.  function clearShowArea() {
  56.      $("#showArea").empty();
  57.  }
  58.  
  59.  // 发送请求方法入口，判断数据类型分别调用对应方法
  60.  function send() {
  61.      var bodyType = $('input:radio[name=bodyType]:checked').val();
  62.      console.log("bodyType: " + bodyType)
  63.      if (bodyType == "form") {
  64.          getOneByForm();
  65.      } else if (bodyType == "json") {
  66.          getOneByJson();
  67.      } else {
  68.          alert("不支持该类型：" + bodyType)
  69.      }
  70.  }
  71.  
  72.  function jsonToFormData(json) {
  73.      var object = JSON.parse(body);
  74.      var rs = "";
  75.      object.key(obj).forEach()
  76.      {
  77.          rs = {}
  78.      }
  79.  }
  80.  
  81.  // 跳转首页
  82.  function toIndex() {
  83.      window.location.href = '/';
  84.  }

httpClientStyle.css

  1.  /*
  2.      httpClient demo的样式
  3.  */
  4.  
  5.  label {
  6.      /*margin: 10px;*/
  7.      margin-top: 12px;
  8.      /*margin-bottom: 20px;*/
  9.  }
  10.  
  11.  div {
  12.      margin-top: 10px;
  13.      margin-bottom: 10px;
  14.  }

截图：

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之RTOS学习

    Linux之RTOS学习 RTOS: Real time operating system 系统选型 可选方案 RTLinux - FSMLabs, WindRiver Systems - http: ...

  2. QT插件+ROS 1 安装配置

    测试环境: 系统版本:Ubuntu14.04 ROS版本:indigo QT版本:5.8.0 QtCreator安装 1 安装前准备,安装相应的GNU开发工具集和OpenGL开发库, 请注意安装软件都 ...

  3. 获得数值型数组的所有元素之和(分别使用增强for循环和普通for循环)

    package com.Summer_0419.cn; /** * @author Summer * 获得数值型数组的所有元素之和 */public class Test_Method13 { pub ...

  4. Vue-比较方法、计算属性和侦听器

    分别用方法.计算属性和侦听器实现当fristName和lastName改变时,fullName跟着改变. 一.方法: html: <div id="app"> {{fu ...

  5. JavaEE学习之Spring声明式事务

    一.引言 上一篇文章,学习了AOP相关知识,并做了一个简单的Hello world.本文在上篇文章的基础上,进一步学习下Spring的声明式事务. 二.相关概念 1. 事务(Transaction)— ...

  6. 波音，自动驾驶bug未修复，致346人丧生！5个月内两次坠毁！其中，包括8名中国公民

    一,波音737 MAX再次坠毁 继2018年10月29日,印尼波音737MAX飞机坠入爪哇海,导致178名乘客不幸遇难后,时隔不足5月,上周日,埃塞俄比亚航空公司一架波音737MAX客机在飞往肯尼亚途 ...

  7. .NET-记一次架构优化实战与方案-前端优化

    目录 .NET-记一次架构优化实战与方案-梳理篇 .NET-记一次架构优化实战与方案-前端优化 .NET-记一次架构优化实战与方案-底层服务优化 前言 上一篇<.NET-记一次架构优化实战与方案 ...

  8. 苹果 icloud 把我 ipad min 所有照片丢失

    苹果 icloud 把我 ipad min 所有照片丢失,大概发生在 '云上贵州' 之后! 发帖纪念--- 求个说法---

  9. python中各个response使用

    Python django中我们经常用的response有django中的 JsonResponse, HttpResponse,还有DRF中的Response 在使用的时候,经常会不知道如何什么时候 ...

  10. 我的2017&2018

    最近项目进入验收阶段,所以上班没那么忙碌了,但是怎么说呢,我可能天生是闲不住的主,觉得浑身不自在(我这样的人是不是特别不会享福),此处应该有个笑脸哈. 翻看了博客园好几个大牛写的技术文章,感慨大牛不愧 ...