作为一个前端开发，只要项目实现了前后端分离，就免不了要测试后端提供的API是不是正常。但有时候要测试后端API，可能需要先登录，用Fiddler等工具又一堆麻烦的配置，所以写这个简陋的页面。
使用方法：将下面代码保存成一个html页面，然后上传到后端API所在web服务器中，如果需要登录的话先登录，然后访问该页面。
页面中有两个按钮：
Execute：执行请求（快捷操作：按Enter键）
Clear：清空表单（快捷操作：按ESC键）
选择框：
Method：只有GET和POST两种，
GET请求：如果有参数需要拼写在url后面（例如：/api/v1/list?foo=false&bar=1）
POST请求：请求参数是以json格式发送到后端的，请求参数粘贴到Param的输入框中
输入框：
Url：请求地址，只能请求当前域名下的地址
Param：POST请求时的参数，GET请求不需要，向该输入框中输入数据时会自动切换到POST的Method
显示框：
Result：显示请求结果，仅支持返回结果为Json的请求，返回的Json数据会被格式化输出成缩进为4个空格的数据显示，可以供模拟数据拷贝使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>api test</title>
<style type="text/css">
.container {
padding: 50px;
}
.btn-content {
margin-bottom: 20px;
}
h5 {
margin-bottom: 10px;
}
pre {
width: 800px;
min-height: 100px;
padding: 10px;
border: 1px solid #999;
}
</style>
<!--<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>-->
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script>
$(function(){
$('#urlTip').html(function(){
var arr = [location.protocol, '//', location.hostname, location.port ? ':':'', location.port];
return arr.join('');
}());
$('#url').val('/api/').focus();
function request(){
var request_method = $('#method').val();
var request_url = $('#url').val();
var request_param = $('#param').val();
request_param = request_param.replace(/[\s\r\n]/g,"");
console.log('method:', request_method, 'url:', request_url, 'param:',request_param);
if (request_method === 'get') {
$.get(request_url, function(data){
if (typeof data === 'object') {
data = JSON.stringify(data, null, 4);
} else {
console.warn('return is not obj');
data = JSON.stringify(JSON.parse(data), null, 4);
}
console.log(data);
$('#result').html(data);
});
} else if (request_method === 'post') {
var param = JSON.stringify(JSON.parse(request_param));
$.ajax({
type:"post",
url: request_url,
data: param,
contentType: "application/json;charset=utf-8",
success: function (data) {
if (typeof data === 'object') {
data = JSON.stringify(data, null, 4);
} else {
console.warn('return is not obj');
data = JSON.stringify(JSON.parse(data), null, 4);
}
console.log(data);
$('#result').html(data);
}
});
}
}
function clear() {
$('#method').val('');
$('#param').val('');
$('#url').val('/api/').focus();
}
$('#execute').click(request);
$('#clear').click(clear);
$(document.body).keydown(function(e) {
if (e.keyCode === 13) {
request();
} else if (e.keyCode === 27) {
clear();
}
});
$('#param').keydown(function(e) {
$('#method').val('post');
});
});
</script>
</head>
<body>
<div class="container">
<div class="btn-content">
<button id="execute">Execute</button>
<button id="clear">Clear</button>
</div>
<select id="method">
<option value="get">Get</option>
<option value="post">Post</option>
</select>
<span id="urlTip">URL:http://web.test2.com</span>
<input id="url" value="" size="80"/>
<h5>Param:</h5>
<div>
<textarea id="param" rows="20" cols="100"></textarea>
</div>
<h5>Result:</h5>
<pre id="result"></pre>
</div>
</body>
</html>
PS:附上文件。
分享到：
相关推荐
REST（Representational State Transfer）是一种网络应用程序的设计风格和开发方式，强调了资源的概念，通过URI（统一资源标识符）定位资源，通过HTTP方法（GET, POST, PUT, DELETE等）操作资源。 3. **技术栈**：...
综上所述，"i-invest-server:i-Invest后端api" 是一个基于JavaScript的金融投资后端服务，它以RESTful API的形式对外提供多种投资管理功能，结合性能优化和安全措施，为用户提供稳定、安全的投资平台服务。...
3. **RESTful API设计**：为了使uniapp前端能够与后端通信，后端会提供一组RESTful API接口，这些接口遵循HTTP方法（GET、POST、PUT、DELETE等），对应资源的操作。 4. **身份验证与授权**：考虑到音乐应用可能包含...
Node.js-mocker-api是专为开发人员设计的一个实用工具，旨在帮助他们在没有实际REST API服务器的情况下，快速构建和测试基于REST API的应用程序。这个库利用了Node.js的强大功能，允许开发者模拟各种HTTP响应，包括...
例如，Node.js是一个流行的后端开发环境，它通常会与npm（Node.js的包管理器）搭配使用，而Express是一个轻量级的Node.js Web应用框架。 ### 第一个后端应用 创建一个简单的后端应用通常涉及编写代码来处理HTTP...
《深入解析YCool后端API服务器》 在现代互联网应用中，后端API服务器起着至关重要的作用，它负责处理前端请求，与数据库交互，并提供数据服务。本篇将详细探讨YCool后端API服务器的设计理念、技术选型以及实现细节...
Node.js允许开发者使用JavaScript进行全栈开发，包括后端逻辑处理，这使得TeamWork-后端API可能利用了Node.js的非阻塞I/O和事件驱动的特性，提高了处理大量并发请求的能力。 在开发TeamWork-后端API时，开发人员...
标题 "Node.js-atmo-服务器端API模拟" 指的是一个使用Node.js构建的工具，专门用于在服务器端模拟API。这个工具名为"Atmo"，可能是开发者Raathigesh创建的一个开源项目，版本号为3236ae7。在开发过程中，模拟API对于...
3. **API设计**：为了与前端进行数据交换，后端需要提供RESTful API接口，遵循HTTP协议，通过GET、POST、PUT、DELETE等方法进行数据操作。 4. **身份验证与授权**：考虑到学习平台可能需要用户登录，后端需要实现...
4. **前端开发**：使用HTML、CSS和JavaScript（如React、Vue.js或Angular）构建用户界面，通过Ajax或Fetch API调用后端API。 5. **部署与测试**：完成开发后，将应用部署到服务器，进行测试确保所有功能正常运行。 ...
精益Todo后端 ... 后端通过HTTP方法（GET，POST，PUT，DELETE）支持简单的API-并不是真正的完整RESTful实现-以及WebSocket-API来显示一些RTC功能。 框架/库： for HTTP API 用于Socket API的 用于数据存储
标题“backend-jd-list:jd-list后端”表明这是一个关于京东（JD）列表功能的后端...综上所述，这个“backend-jd-list:jd-list后端”项目可能会涵盖上述多个方面，涉及到JavaScript后端开发的多个核心知识点和技术栈。
3. **RESTful API设计**: Minha-Carteira后端可能设计有REST（Representational State Transfer）风格的API，这是一种常见的Web服务架构，通过HTTP方法（GET、POST、PUT、DELETE等）操作资源，实现前后端分离。...
4. RESTful API设计：在后端API的设计中，通常遵循REST（Representational State Transfer）架构风格，以资源为中心，使用HTTP方法（GET、POST、PUT、DELETE等）来操作这些资源。Iris框架提供了对RESTful API的强大...
【标题】"fcc-api:FreeCodeCamp后端API项目"是指FreeCodeCamp（简称FCC）提供的一个关于构建后端API的学习项目。FCC是一个知名的在线学习平台，专注于教授编程技能，尤其是对于初学者，其课程涵盖前端开发、后端开发...
2. **创建FastAPI应用**：初始化FastAPI项目，定义路由和API接口，例如GET所有课程、POST添加新课程等。 3. **数据库集成**：配置数据库连接，实现数据的CRUD操作。 4. **uniapp界面设计**：根据课程表需求，设计并...
本项目"koa + mongodb + swagger 实现后端api开发封装"旨在利用Koa.js作为Web服务器框架，MongoDB作为数据库存储，以及Swagger作为API文档管理和测试工具，来高效地构建和管理后端API。 **Koa.js** Koa是Node.js...
"node.js+express+sqlserver 极简后端Api框架"就是这样一个解决方案，它结合了Node.js的非阻塞I/O特性，Express的简洁路由处理，以及SQL Server的强大数据库支持，为开发者提供了一个快速开发API的工具。 首先，...
- **自动化部署**: 使用工具如Docker和持续集成/持续部署(CI/CD)流程，可以自动化构建、测试和部署"trackme-backend"，提高开发效率并保证环境一致性。 综上所述，"trackme-backend:trackme-fxos 后端"项目涵盖了...