这是我第一次发帖,所以如果我错过了什么或弄错了什么,我深表歉意。我还看过其他帖子,虽然有些非常相似,但我认为它并没有完全达到我正在寻找的答案。我对 AJAX 也很陌生(尽管我认为这段代码并没有真正利用很多 AJAX),所以对这个问题的任何有用的见解将不胜感激。
我正在尝试创建一个测验模板,该模板在选择单选按钮并单击"答案"按钮后使用 AJAX 调用 PHP 文件中的数据。
一般的想法是,在用户阅读问题后,他们选择一个单选按钮并单击"答案"按钮,页面的底部会填充正确或不正确的字符串。用文本和 css 填充它很容易,但我的问题在于提取正确的文本。
以下是设置表单提交的 HTML 代码块:
<form action="data.php" method="post" id="q1">
<input type="radio" name="answer1" value="1a" id="1q"> A.
<br>
<input type="radio" name="answer1" value="1b" id="1q"> B.
<br>
<input type="radio" name="answer1" value="1c" id="1q"> C.
<br>
<input type="radio" name="answer1" value="1d" id="1q"> D.
<br>
<input name="submit1" id="answer" type="button" title="abutton" value="ANSWER">
</form>
在这里,我设置了四个单选按钮,每个按钮对应于一个字母,表单链接到 data.php,在这种情况下,我从中提取正确/不正确的文本的文件。
我有一个早期版本的代码,它将遵循我打算做的逻辑,但会在另一个页面中填充正确的文本。我的目标是在单击"答案"按钮后出现的同一页面中填充灰色的"答案"框。追加的文本根据用户的选择在代码中定义为$correct或$incorrect变量。
调用 PHP 文件的 JS 代码块:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#answer").click(function()
{
var test1 = $.post("data.php",
{answer1:'1d'},
function(data)
{
$("#text1").empty();
$("#text1").append(data);
$("#panel").fadeDown("slow");
});
});
});
</script>
我在构建此JS代码时得到了帮助,但我对此有足够的了解。这里的目标是在单击"答案"按钮后,将文本附加到表单元素下方。这显示为一个小的灰色"答案"框,用户可以从中阅读他们是否得到了正确的答案。
这行特定的代码困扰着我:
{answer1:'1d'},
1d 包含正确的答案,当您选择任何单选按钮并按"答案"时,它仍然显示正确的文本。
但是当我尝试做这样的事情时:
{answer1:'1d',answer1:'1a',answer1:'1b',answer1'1c'},
不正确的文本(应在选择单选按钮 1a、1b 或 1c 后填充)将覆盖应填充的文本,即使选择了单选按钮 1d。
JS代码调用的PHP代码:
<?php
$correct = "Correct";
$incorrect = "Incorrect";
if (isset($_POST['answer1']))
{
if ($_POST['answer1'] === '1d')
{
print $correct1;
}
elseif ($_POST['answer1'] === '1b')
{
print $incorrect1;
}
elseif ($_POST['answer1'] ==='1c')
{
print $incorrect1;
}
elseif ($_POST['answer1'] === '1a')
{
print $incorrect1;
}
};
?>
同样,对此问题的任何见解将不胜感激!如果我需要澄清任何事情,请告诉我。谢谢!
首先,id
应该始终是唯一的。因此,请删除或更改输入无线电的id
。
然后,您需要更改ajax请求以发送选定的输入无线电,如下所示:
$(document).ready(function() {
$("#answer").click(function() {
var answer = $("input[name=answer1]:checked").val();
$.post("data.php", {answer1: answer}, function(data){
$("#text1").empty();
$("#text1").append(data);
$("#panel").fadeIn("slow");
});
});
});
因为在代码中,您永远不会将选定的无线电发送到您的 php 页面。如果您只在此行中发送"1d"{answer1:'1d'}
即使您选中另一个单选按钮,您的 php 页面也将始终返回"正确"文本。
我不知道jQuery fadeDown()
方法。只有fadeIn()
或fadeOut()
.
此外,在数据中.php $correct1
和$incorrect1
是未定义的。所以echo
$correct
或$incorrect
.