JavaScript之简易http接口测试工具网页版
简易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"> Form 
- <input name="bodyType" type="radio" value="json" checked> JSON
- </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接口测试工具网页版的更多相关文章
- javascript实现移动端网页版阅读器
现在手机上的文本阅读app已经非常丰富,良好的阅读体验与海量的书库常常令我感到无比兴奋. 我想到8年前用一点几寸屏幕的mp3看电子书的情景,顿生一种淡淡的温馨.再久远一些,小的时候,我也经常和小伙伴们 ...
- 利用 JavaScript SDK 部署网页版“Facebook 登录”
facebook开发者平台https://developers.facebook.com/ 利用 JavaScript SDK 部署网页版“Facebook 登录” 通过采用 Javascript 版 ...
- JavaScript 实现简易版贪吃蛇(Day_13)
时光永远在变迁,你始终要丢下过去. 使用语言 JavaScript 概述 运用JavaScript 实现简易版<贪吃蛇>. Html 页面 1 <!DOCTYPE htm ...
- Python接口测试实战1(下)- 接口测试工具的使用
如有任何学习问题,可以添加作者微信:lockingfree 课程目录 Python接口测试实战1(上)- 接口测试理论 Python接口测试实战1(下)- 接口测试工具的使用 Python接口测试实战 ...
- 分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
- Remoting接口测试工具
动手写一个Remoting接口测试工具 基于.NET开发分布式系统,经常用到Remoting技术.在测试驱动开发流行的今天,如果针对分布式系统中的每个Remoting接口的每个方法都要写详细的测试脚本 ...
- Dreamweaver杀手!Illustrator终结者?Flash的末日?图形图像设计程序之网页版
Dreamweaver杀手!Illustrator终结者?Flash的末日?图形图像设计程序之网页版 阅读: 评论: 作者:Rybby 日期: 来源:rybby.com Adobe 家的 Il ...
- postman接口测试工具的常规使用
目录 postman接口测试工具简介与安装 postman发送get请求 JSON数据详解 postman发送post请求 postman中post请求传参说明 postman设置请求的header ...
- Springboot整合WebSocket实现网页版聊天,快来围观!
随机推荐
- 009_npm常用命令参数总结
npm是什么 NPM的全称是Node Package Manager,是随同NodeJS一起安装的包管理和分发工具,它很方便让JavaScript开发者下载.安装.上传以及管理已经安装的包. 一.np ...
- WiFi-ESP8266入门http(3-1)网页认证上网-post请求(原教程)
教程:http://geek-workshop.com/thread-37484-1-1.html 源码:链接:https://pan.baidu.com/s/1yuYYqsM-WSOb0AbyAT0 ...
- 在 C 代码中嵌入 Python 语句或使用 Python 模块 (Visual Studio 2013 环境设置)
1) 新建一个 内嵌 Python 语句的 C 代码, // This is a test for check insert the Python statements or module in C. ...
- django一般架构思维导图
本例已django项目名称为myblog,其下面有2个应用blog和comment介绍:
- 史上最全的Spring Boot配置文件详解
Spring Boot在工作中是用到的越来越广泛了,简单方便,有了它,效率提高不知道多少倍.Spring Boot配置文件对Spring Boot来说就是入门和基础,经常会用到,所以写下做个总结以便日 ...
- ML.NET 示例:多类分类之鸢尾花分类
写在前面 准备近期将微软的machinelearning-samples翻译成中文,水平有限,如有错漏,请大家多多指正. 如果有朋友对此感兴趣,可以加入我:https://github.com/fei ...
- 分布式系统消息中间件——RabbitMQ的使用思考篇
分布式系统消息中间件--RabbitMQ的使用思考篇 前言 前面的两篇文章分布式系统消息中间件--RabbitMQ的使用基础篇与分布式系统消息中间件--RabbitMQ的使用进阶篇,我们简单介 ...
- Python从菜鸟到高手(7):字符串
1. 单引号字符串和转义符 字符串与数字一样,都是值,可以直接使用,在Python控制台中直接输入字符串,如"Hello World",会按原样输出该字符串,只不过用单引号括了 ...
- Item 20: 使用std::weak_ptr替换会造成指针悬挂的类std::shared_ptr指针
本文翻译自modern effective C++,由于水平有限,故无法保证翻译完全正确,欢迎指出错误.谢谢! 博客已经迁移到这里啦 矛盾的是,我们很容易就能创造出一个和std::shared_ptr ...
- unixbench 物理机性能与虚拟机性能测试对比
1. 测试方法 wget https://download.laobuluo.com/tools/UnixBench5.1.3.tgz tar -zxvf UnixBench5.1.3.tgz cd ...