7个API调用示例：使用JavaScript实现多输入框数据获取
这是一个使用JavaScript编写的HTML页面的示例，其中调用了7个API。页面中有7个输入框，每次点击一个输入框都会触发一个API调用，并返回一个结果信息。
<!DOCTYPE html>
<html>
<head>
<title>7个API调用示例</title>
<script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
</head>
<body>
<h1>7个API调用示例</h1>
<input type='text' id='input1' placeholder='输入框1'>
<button onclick='callAPI('input1')'>调用API</button>
<div id='result1'></div>
<input type='text' id='input2' placeholder='输入框2'>
<button onclick='callAPI('input2')'>调用API</button>
<div id='result2'></div>
<input type='text' id='input3' placeholder='输入框3'>
<button onclick='callAPI('input3')'>调用API</button>
<div id='result3'></div>
<input type='text' id='input4' placeholder='输入框4'>
<button onclick='callAPI('input4')'>调用API</button>
<div id='result4'></div>
<input type='text' id='input5' placeholder='输入框5'>
<button onclick='callAPI('input5')'>调用API</button>
<div id='result5'></div>
<input type='text' id='input6' placeholder='输入框6'>
<button onclick='callAPI('input6')'>调用API</button>
<div id='result6'></div>
<input type='text' id='input7' placeholder='输入框7'>
<button onclick='callAPI('input7')'>调用API</button>
<div id='result7'></div>
<script>
function callAPI(inputId) {
var inputValue = document.getElementById(inputId).value;
var resultId = 'result' + inputId.slice(-1);
// 根据需要调用不同的API
if (inputValue) {
$.ajax({
url: 'https://api.example.com',
method: 'GET',
data: {
input: inputValue
},
success: function(response) {
document.getElementById(resultId).innerHTML = response;
},
error: function() {
document.getElementById(resultId).innerHTML = 'API调用失败';
}
});
} else {
document.getElementById(resultId).innerHTML = '请输入有效的内容';
}
}
</script>
</body>
</html>
在这个示例中，每个输入框都有一个唯一的ID（input1、input2、...、input7），并且每个结果信息的容器也有一个唯一的ID（result1、result2、...、result7）。当点击一个输入框的调用API按钮时，会调用callAPI函数，该函数会获取输入框的值，然后使用AJAX请求发送到相应的API。API的URL、方法和参数可以根据实际情况进行修改。成功调用API后，将结果显示在相应的结果信息容器中，如果调用失败，则显示错误信息。如果输入框没有有效内容，则显示相应的提示信息。
原文地址: https://www.cveoy.top/t/topic/p9ut 著作权归作者所有。请勿转载和采集!