html文件Js写输入框和弹框调接口jQuery
以下是一个简单的HTML文件示例，使用JavaScript、jQuery和弹框来调用一个假设的接口：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Input and Alert Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function callApi() {
var inputValue = $('#inputValue').val();
// 假设的API地址，应该替换为实际的API地址
var apiUrl = 'https://api.example.com/data/' + encodeURIComponent(inputValue);
// 使用jQuery发送GET请求
$.get(apiUrl, function(data) {
// 假设API返回的数据是JSON格式
alert('API Response: ' + JSON.stringify(data));
}).fail(function() {
alert('Error calling API');
});
}
</script>
</head>
<body>
<input type="text" id="inputValue" placeholder="Enter a value">
<button onclick="callApi()">Call API</button>
</body>
</html>这段代码中，我们定义了一个callApi函数，它会在用户点击按钮时被触发。这个函数会从一个ID为inputValue的输入框中取得值，拼接到API的URL中，然后使用jQuery的$.get方法来发送一个GET请求到这个URL。成功获取数据后，它会使用alert弹框显示这些数据；如果请求失败，则会弹出一个错误提示。
请注意，这个示例假设API的URL和返回的数据格式是存在且可用的。在实际应用中，你需要替换为你自己的API详情。
评论已关闭