【每日知识】Ajax选择题部分
以下是一个使用Ajax技术的简单选择题的示例代码。这个例子中,我们将使用jQuery库来简化Ajax的使用。
HTML部分:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax 选择题</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function checkAnswer() {
var selectedOption = $('input[name="question1"]:checked').val();
if (selectedOption === 'a') {
$.ajax({
url: 'check.php',
type: 'POST',
data: { answer: selectedOption },
success: function(response) {
alert('回答正确:' + response);
},
error: function() {
alert('回答错误,请稍后再试。');
}
});
} else {
alert('回答错误,正确答案是A。');
}
}
</script>
</head>
<body>
<form>
<p>1. JavaScript是一种( )。</p>
<input type="radio" name="question1" value="a"> A. 编程语言<br>
<input type="radio" name="question1" value="b"> B. 标记语言<br>
<input type="radio" name="question1" value="c"> C. 数据库语言<br>
<input type="radio" name="question1" value="d"> D. 操作系统
<br><br>
<button type="button" onclick="checkAnswer()">提交</button>
</form>
</body>
</html>
PHP部分(check.php):
<?php
// 这里可以添加处理正确答案的逻辑,例如:记录分数、更新用户信息等。
echo '答案正确';
?>
这个例子中,我们定义了一个简单的HTML页面,包含了一个单选按钮的选择题。当用户选择答案并点击提交按钮时,会触发checkAnswer
函数,该函数会检查用户的选择,并通过Ajax技术向服务器发送请求。服务器端的check.php
文件会处理这个请求,并可以根据需要返回响应。
评论已关闭