js工具页面-测试后端API，支持GET、POST

最新推荐文章于 2023-11-30 10:31:01 发布

wenhao880204

最新推荐文章于 2023-11-30 10:31:01 发布

阅读量320

点赞数

分类专栏： js 前端技术文章标签： JavaScript Ajax ViewUI

本文链接：https://blog.csdn.net/wenhao880204/article/details/84809149

版权

js 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

前端技术

3 篇文章 0 订阅

订阅专栏

作为一个前端开发，只要项目实现了前后端分离，就免不了要测试后端提供的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:附上文件。

wenhao880204

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js工具页面-测试后端API，支持GET、POST

作为一个前端开发，只要项目实现了前后端分离，就免不了要测试后端提供的API是不是正常。但有时候要测试后端API，可能需要先登录，用Fiddler等工具又一堆麻烦的配置，所以写这个简陋的页面。使用方法：将下面代码保存成一个html页面，然后上传到后端API所在web服务器中，如果需要登录的话先登录，然后访问该页面。页面中有两个按钮：Execute：执行请求（快捷操作：按Enter键）...
复制链接

扫一扫