在 JQTouch 中加载带有动画的单独页面

Question

我正在尝试使用 JQTouch 将数据库驱动的多项选择式学习网站（用 JSP 编写）转换为 iPhone 应用程序。

如果我将所有问答加载到同一文件中自己的 div 中，我可以使用主题标签链接轻松地在它们之间进行链接和动画，例如： a class="button" href="#question22"

不幸的是，这不切实际。网站当前工作的逻辑需要调用许多动态生成的页面；我无法将每个问题都包含在同一个平面文件中自己的 div 中。

我将如何动态（预）加载下一个问题（像 AskQuestion.jsp?questionId=Kzhctand 这样的 JSP 页面），然后在用户按下按钮后在应用程序中提供该问题？

感谢您提供的任何帮助。

——多诺万

Answer 1

我为我的抽认卡系统做了类似的事情。
我有一个 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 形式生成下一张卡片。