简易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;
}
截图：
