【每日知识】Ajax选择题部分
以下是一个简单的Ajax选择题部分的代码示例，用于在前端网页中实现用户对问题的选择并通过Ajax异步提交给后端进行处理：
<!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>
$(document).ready(function() {
$('#questionForm').submit(function(e) {
e.preventDefault();
var selectedOption = $('input[name=question1]:checked').val();
$.ajax({
url: 'your-server-endpoint.php', // 替换为你的服务器端点
type: 'POST',
data: {
question: '选择题答案',
answer: selectedOption
},
success: function(response) {
alert('提交成功: ' + response);
},
error: function() {
alert('提交失败');
}
});
});
});
</script>
</head>
<body>
<form id="questionForm">
<p>问题1: 下面哪个选项是正确的?</p>
<input type="radio" id="option1" name="question1" value="A">
<label for="option1">A) 正确答案</label><br>
<input type="radio" id="option2" name="question1" value="B">
<label for="option2">B) 错误答案</label><br>
<input type="radio" id="option3" name="question1" value="C">
<label for="option3">C) 错误答案</label><br>
<input type="radio" id="option4" name="question1" value="D">
<label for="option4">D) 错误答案</label><br><br>
<input type="submit" value="提交">
</form>
</body>
</html>在这个示例中，我们使用jQuery库来简化Ajax的使用。当用户提交表单时，我们阻止表单的默认提交行为，并获取用户选择的答案。然后我们使用Ajax异步将答案发送到服务器端处理。服务器端的处理需要你自己实现，代码示例中的 'your-server-endpoint.php' 应该替换为你的实际服务器端点。
评论已关闭