要实现AJAX调用的答案出现和消失,可以使用JavaScript和CSS来处理。
首先,HTML部分可以包含一个按钮和一个用于显示答案的元素,例如:
接下来,使用JavaScript编写AJAX调用的代码。可以使用XMLHttpRequest对象或者更方便的jQuery库来实现。下面是使用jQuery的示例代码:
$(document).ready(function() {
$("#showAnswer").click(function() {
$.ajax({
url: "your_api_url", // 替换为实际的API地址
method: "GET",
success: function(response) {
$("#answer").text(response); // 将答案显示在answer元素中
$("#answer").show(); // 显示answer元素
},
error: function() {
$("#answer").text("调用答案失败"); // 显示调用失败的提示信息
$("#answer").show(); // 显示answer元素
}
});
});
});
在上面的代码中,当点击按钮时,发送一个GET请求到指定的API地址。如果成功接收到答案,将答案显示在answer元素中,并通过show()方法显示answer元素。如果调用失败,将显示一个提示信息并显示answer元素。
最后,使用CSS来控制answer元素的显示和隐藏。可以设置默认情况下answer元素为隐藏状态,点击按钮时显示答案。
#answer {
display: none; // 默认隐藏answer元素
}
这样,当页面加载完成时,按钮和answer元素就已经准备好了。点击按钮时,会发送AJAX请求获取答案,并将答案显示出来。
上一篇:AJAX调用弹出'打印页面”选项