我为我的抽认卡系统做了类似的事情。我有一个用于当前卡片“正面”和“背面”的 div,当用户给出答案时,它会通过 ajax、json 和 php 的魔力加载下一张卡片。
这是答案页面的相关部分。
<h2>Answer:</h2>
<div class="qna">
<p id="question2" class="qna">SomethingsNotWorking.</p>
<p id="answer2" class="qna">SomethingsNotWorking.</p>
</div>
<h2>Did you know it?</h2>
<a >Submit</a>
<BR><a href="#" onClick="javascript:sendCardInfo('Yes')" name="knewIt">Yes</a>
<BR><a href="#" onClick="javascript:sendCardInfo('No')" name="knewIt">No</a>
这是通过发送 ajax 查询来处理用户响应的函数。
function sendCardInfo(str){
//alert("sendCardInfo " + str);
$.ajax({
type: "POST",
url: "ajax.php",
data: "currentCard="+$(document).data('currentCard')+"¤tDeck="+$(document).data('currentDeck')+"&knewIt="+str,
dataType: "json",
success: function(data){
jQT.goTo('#home', 'swap');
// store the json response in the data object so it can be retrieved later.
$(document).data( "currentCard" , data.currentCard);
$(document).data( "currentDeck" , data.currentDeck);
$(document).data( "question" , data.question);
$(document).data( "answer" , data.answer);
// update the q and a divs with the current questions.
$('#question1').html( $(document).data( "question" ) );
$('#question2').html( $(document).data( "question" ) );
$('#answer2').html( $(document).data( "answer" ));
},
});
}
在后端,我有一个名为 ajax.php 的 PHP 页面将下一张卡片生成为 JSON。