将ajax post响应拆分为两个div

Question

我正在尝试为孩子们开发一个教程，其中我有一个问题和答案。我正试图使用下面的两个div来实现这一点。有两个div的想法是让孩子们可以打印完整的问题和解决方案，或者点击清除解决方案，只打印问题供以后练习自行解决。我试着同时使用乳胶。如果我在两个文件中发出两个ajax请求，比如CALC_Q，我就可以完成。PHP带有问题响应，CALC_A.PHP带有答案响应，但我相信我可以在一个文件中完成一个Ajax请求，这为我节省了一些时间，并使应用程序工作得更快。如果问题和答案在同一个div中，这很容易，但通过这种方式，当我单击CLEAR SOLUTION时，它会删除我不想要的问题和答案(因为它们将在同一div中(。我希望问题在解决后仍然可见。这是一个必问或不必问的问题。当页面第一次加载时，问题将不可见(我知道这一点(。点击计算后，问题和答案将出现，问题将保持可见，直到页面关闭

我确信我在CALC.php 中吐出对两个div或json调用的响应时出错了

<div id="question" class="col s12 m8 l6 noselect" style = "background-color: green;">
<p id="ques"></p>
</div>
<div id="solution" class="col s12 m8 l6" style = "background-color: white;">
<p id="result"></p>
</div>
function Calc()
{
$('#loader').css('visibility', 'visible');
ajaxRequest= $.ajax({
url: 'CALC.php',
type: 'post',
data: { "num1": myvar1,
"num2": myvar2
},});

ajaxRequest.done(function(response) {
//$('#ques').text(response[q]);  //this didn't work
//$('#result').text(response[a]); // this didn't work
$('#ques').text(response.q);   
$('#result').text(response.a);  
MathJax.Hub.Queue(['Typeset',MathJax.Hub,"result"], function() {$('#loader').css('visibility', 'hidden');});     
}
}

在CALC.php 中

$number1 = $_POST['num1'];  
$number2 = $_POST['num2']; 
$final= $number1+$number2;
$q = $a = array();
$q = $a = null;
$q.="Add these numbers".$number1." and ".$number2;
$q.="<br> Show all work ";
$a = "$ \text{The answer is} $.$final;
echo json_encode(array($q,$a));
return;

Answer 1

我最终解决了它，如下所示。我有点不太接近。它缺少一个我发现的关键陈述在这个网站上只有一个答案是死锁，而在其他人寻求帮助之前没有，这可能就是我错过它的原因。我肯定有一些语法错误。检查下面的响应语句，Mathjax语句还有两个变量：ques、result和CALC.php中的关键头语句

<div id="question" class="col s12 m8 l6 noselect" style = "background-color: green;">
<p id="ques"></p>
</div>
<div id="solution" class="col s12 m8 l6" style = "background-color: white;">
<p id="result"></p>
</div>
function Calc()
{
$('#loader').css('visibility', 'visible');
ajaxRequest= $.ajax({
url: 'CALC.php',
type: 'post',
data: { "num1": myvar1,
"num2": myvar2
},});
ajaxRequest.done(function(response) {
$('#ques').text(response.myquestion);   
$('#result').text(response.myanswer);  
MathJax.Hub.Queue(['Typeset',MathJax.Hub,"ques,result"], function() {$('#loader').css('visibility', 'hidden');});     
}
}    
}

我的另一个文件CALC.php

$number1 = $_POST['num1'];  
$number2 = $_POST['num2']; 
$final= $number1+$number2;
$q = $a = array();
$q = $a = null;
$q.="Add these numbers".$number1." and ".$number2;
$q.="<br> Show all work ";
$a = "$ \text{The answer is} $.$final;
$final_answer = array("myquestion"=>$q,"myanswer"=>$a);
header("Content-Type: application/json");         //without this statement, it wouldn't work
echo json_encode($final_answer);

死锁中提到了这个头语句。参考文献如下：

如何在php中获得对单个ajax请求的多个响应