前端接口调试工具代码示例
当您说'接口调试的前端代码'时，我假设您想要一个前端页面，可以用来测试调用后端接口。下面是一个简单的示例代码：
<!DOCTYPE html>
<html>
<head>
<title>接口调试工具</title>
</head>
<body>
<h1>接口调试工具</h1>
<form id='apiForm'>
<label for='endpoint'>接口地址:</label>
<input type='text' id='endpoint' name='endpoint'>
<br>
<label for='method'>请求方法:</label>
<select id='method' name='method'>
<option value='GET'>GET</option>
<option value='POST'>POST</option>
<option value='PUT'>PUT</option>
<option value='DELETE'>DELETE</option>
</select>
<br>
<label for='payload'>请求参数:</label>
<textarea id='payload' name='payload'></textarea>
<br>
<button type='submit'>发送请求</button>
</form>
<div id='response'></div>
<script>
document.getElementById('apiForm').addEventListener('submit', function(event) {
event.preventDefault();
var endpoint = document.getElementById('endpoint').value;
var method = document.getElementById('method').value;
var payload = document.getElementById('payload').value;
var xhr = new XMLHttpRequest();
xhr.open(method, endpoint, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
var responseDiv = document.getElementById('response');
responseDiv.innerHTML = xhr.responseText;
}
};
xhr.send(payload);
});
</script>
</body>
</html>
这个代码创建了一个简单的表单，可以输入接口地址、请求方法和请求参数。当用户点击“发送请求”按钮时，代码会使用 XMLHttpRequest 对象发送请求到指定的接口，并将响应结果显示在页面上。
请注意，这只是一个简单的示例，实际的接口调试可能涉及更多的错误处理和数据验证。
原文地址: https://www.cveoy.top/t/topic/ffMg 著作权归作者所有。请勿转载和采集!