简易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. 009_npm常用命令参数总结

    npm是什么 NPM的全称是Node Package Manager,是随同NodeJS一起安装的包管理和分发工具,它很方便让JavaScript开发者下载.安装.上传以及管理已经安装的包. 一.np ...

  2. WiFi-ESP8266入门http(3-1)网页认证上网-post请求(原教程)

    教程:http://geek-workshop.com/thread-37484-1-1.html 源码:链接:https://pan.baidu.com/s/1yuYYqsM-WSOb0AbyAT0 ...

  3. 在 C 代码中嵌入 Python 语句或使用 Python 模块 (Visual Studio 2013 环境设置)

    1) 新建一个 内嵌 Python 语句的 C 代码, // This is a test for check insert the Python statements or module in C. ...

  4. django一般架构思维导图

    本例已django项目名称为myblog,其下面有2个应用blog和comment介绍:

  5. 史上最全的Spring Boot配置文件详解

    Spring Boot在工作中是用到的越来越广泛了,简单方便,有了它,效率提高不知道多少倍.Spring Boot配置文件对Spring Boot来说就是入门和基础,经常会用到,所以写下做个总结以便日 ...

  6. ML.NET 示例:多类分类之鸢尾花分类

    写在前面 准备近期将微软的machinelearning-samples翻译成中文,水平有限,如有错漏,请大家多多指正. 如果有朋友对此感兴趣,可以加入我:https://github.com/fei ...

  7. 分布式系统消息中间件——RabbitMQ的使用思考篇

    分布式系统消息中间件--RabbitMQ的使用思考篇 前言     前面的两篇文章分布式系统消息中间件--RabbitMQ的使用基础篇与分布式系统消息中间件--RabbitMQ的使用进阶篇,我们简单介 ...

  8. Python从菜鸟到高手(7):字符串

    1. 单引号字符串和转义符   字符串与数字一样,都是值,可以直接使用,在Python控制台中直接输入字符串,如"Hello World",会按原样输出该字符串,只不过用单引号括了 ...

  9. Item 20: 使用std::weak_ptr替换会造成指针悬挂的类std::shared_ptr指针

    本文翻译自modern effective C++,由于水平有限,故无法保证翻译完全正确,欢迎指出错误.谢谢! 博客已经迁移到这里啦 矛盾的是,我们很容易就能创造出一个和std::shared_ptr ...

  10. unixbench 物理机性能与虚拟机性能测试对比

    1.  测试方法 wget https://download.laobuluo.com/tools/UnixBench5.1.3.tgz tar -zxvf UnixBench5.1.3.tgz cd ...