拆分 ajax post 对两个 div 的响应

Question

我正在尝试为孩子们开发一个教程，其中我有一个问题和答案。我正在尝试使用两个 div 来完成此操作，如下所示。有两个 div 的想法是让孩子们可以打印完整的问题和解决方案，或者单击清除解决方案，打印问题仅供以后练习自行解决。我正在尝试同时使用乳胶。如果我在 2 个文件中发出两个 ajax 请求，比如 CALC_Q.PHP 有问题响应，CALC_A.php 有答案响应，我已经能够完成，但我确信我可以做一个 Ajax 在同一个文件中请求为我节省了一些时间，并使应用程序运行得更快。如果问题和答案都在 SAME div 中，这很容易，但是当我单击 CLEAR SOLUTION 时，它会删除我不想要的问题和答案（因为它们将在相同的 div 中） .我希望问题在清除解决方案后保持可见。这是一个必须或不会问的问题。首次加载页面时问题将不可见（我知道这一点）。单击计算后将出现问题和答案，并且问题将一直显示直到页面关闭

我确定我做错了什么，吐出对两个 div 或 json 调用 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[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语句也有2个变量：ques，result，以及CALC.php中关键的header语句。我通过发回 object 然后将内容拆分到相应的 div 任何我想要的地方来解决它：

 <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);

此 header 语句被死锁提及。这里是参考：

How to get multiple responses to a single ajax request in php

拆分 ajax post 对两个 div 的响应

splitting ajax post response to two divs

html

ajax

post

json

call