0

我正在做一个使用 jquery 的简单 PHP 测验应用程序,规则是:

  1. 每个测验有很多问题(最多 100 个),用户单击以添加更多问题,这会生成一个新表单,附加在列表末尾
  2. 每个问题有很多答案(最多 5 个),用户点击为一个问题添加更多答案,附加在该问题的答案列表的末尾
  3. 问题按提交顺序排序/加权,在这种情况下是 ajax post
  4. 答案被命名为“答案[]”
  5. 从数据库加载的测验,用户可以在上述限制内删除、编辑或添加新的问题/答案

我决定用“class='postable'”将每个问题组织成一个表格。我的测验更新脚本如下所示

$("#update-change").click(function(e){
    e.preventDefault();
    showupdate('Updating..');

       $('form.postable').each(function(){
           $.ajax({
                 type: "POST",
                 url: 'update_ask.php',

                 data: $(this).serialize()
            }).done(function( msg ) {
                feedbackMessage(msg);
            });
       });
});

因此,每次“#update-change”命中时,都会有 n 个 ajax 发布到“update_ask.php”以保存测验内容。问题是问题不会被排序为看到,它可能是'update_ask.php'由于滞后而无法按顺序处理ajax请求。

您对此案有任何想法/解决方案吗?请指教。谢谢。

一个问题集的 HTML 如下所示:

<form action="update_ask.html" method="post" accept-charset="utf-8" name="aj_edit_ask2430" id="editaskform2430" class="postable">
    <input type="hidden" name="idask" value="2430" />
    <input type="hidden" name="idquiz" value="240" />
    <div class="ask-holder">
        <textarea name="ask" class="ask"  tabindex="24300" placeholder="Question">cau 5</textarea>
        <div class="right answer-image-holder"><img src="no-image.jpg" id="askimg2430" class="answerimg" alt="image" />
            <input type="hidden" name="askimg" id="saskimg2430" value="" />
        </div>
    </div>
    <div id="solution2430" class="answer-holder">
        <div id="answer30684" class="answer-row">
            <textarea name="answer[]" class="answer" tabindex="24301" placeholder="Answer or Solution">answer 51</textarea>
            <div class="right answer-image-holder"> <img src="no-image.jpg" id="img30684" class="answerimg" alt="image" />
            <input type="hidden" name="images[]" id="simg30684" value="" />
            </div>
            <span>
            <input type="radio" name="iscorrect" value="1" checked='checked'  />
            Correct <a href="#row2430" onclick="removeAnswer('30684')" title="Remove this solution" class="removeanswer">Delete</a></span>
        </div>
        <div id="answer30685" class="answer-row">
            <textarea name="answer[]" class="answer" tabindex="24302" placeholder="Answer or Solution">answer 52</textarea>
            <div class="right answer-image-holder"> <img src="no-image.jpg" id="img30685" class="answerimg" alt="image" />
                <input type="hidden" name="images[]" id="simg30685" value="" />
            </div>
            <span>
            <input type="radio" name="iscorrect" value="2"   />
            Correct <a href="#row2430" onclick="removeAnswer('30685')" title="Remove this solution" class="removeanswer">Delete</a></span>
         </div>
        <div id="answer30686" class="answer-row">
            <textarea name="answer[]" class="answer" tabindex="24303" placeholder="Answer or Solution">answer 53</textarea>
            <div class="right answer-image-holder"> <img src="no-image.jpg" id="img30686" class="answerimg" alt="image" />
                <input type="hidden" name="images[]" id="simg30686" value="" />
            </div>
            <span>
            <input type="radio" name="iscorrect" value="3"   />
            Correct <a href="#row2430" onclick="removeAnswer('30686')" title="Remove this solution" class="removeanswer">Delete</a></span>
         </div>
    </div>
    <a href="#row2430" onclick="return addSolution('2430')" title="Add one more solution">Add</a> <a href="#row2430" onclick="return removeAsk('2430','order2430')" title="Completely Delete this question">Delete this question</a>
</form>
4

2 回答 2

1

将每个问题放在自己的形式中并为页面上的每个问题发出 AJAX 请求似乎是个坏主意。这将是大量开销,每次用户点击按钮时都会产生多达 100 个服务器请求。你应该把所有的问题都写在一张表格上。

至于使您认为每个问题都需要一种表格的额外复杂性,我敢打赌,对于所有问题仍然可以使用一种表格来完成……但是您必须发布一个代码示例来显示该复杂性在我可以帮助之前。


更新:

拥有与每个问题相关的额外内容并不意味着您需要为每个问题使用一个表格。这只是意味着您需要修改元素的命名约定。根据您提供的 HTML,您可以将其更改为更像这样的内容(注意表单元素名称的更改):

<form action="update_ask.html" method="post" accept-charset="utf-8">
    <input type="hidden" name="questions[0][idquiz]" value="240" />
    <div id="question-2430">
        <input type="hidden" name="questions[0][idask]" value="2430" />
        <div class="ask-holder">
            <textarea name="questions[0][ask]" class="ask"  tabindex="24300" placeholder="Question">cau 5</textarea>
            <div class="right answer-image-holder"><img src="no-image.jpg" id="askimg2430" class="answerimg" alt="image" />
                <input type="hidden" name="questions[0][askimg]" id="saskimg2430" value="" />
            </div>
        </div>
        <div id="solution2430" class="answer-holder">
            <div id="answer30684" class="answer-row">
                <textarea name="questions[0][answers][]" class="answer" tabindex="24301" placeholder="Answer or Solution">answer 51</textarea>
                <div class="right answer-image-holder">
                    <img src="no-image.jpg" id="img30684" class="answerimg" alt="image" />
                    <input type="hidden" name="questions[0][images][]" id="simg30684" value="" />
                </div>
                <span>
                    <input type="radio" name="questions[0][iscorrect]" value="1" checked='checked'  /> Correct
                    <a href="#row2430" onclick="removeAnswer('30684')" title="Remove this solution" class="removeanswer">Delete</a>
                </span>
            </div>
            <div id="answer30685" class="answer-row">
                <textarea name="questions[0][answers][]" class="answer" tabindex="24302" placeholder="Answer or Solution">answer 52</textarea>
                <div class="right answer-image-holder">
                    <img src="no-image.jpg" id="img30685" class="answerimg" alt="image" />
                    <input type="hidden" name="questions[0][images][]" id="simg30685" value="" />
                </div>
                <span>
                    <input type="radio" name="questions[0][iscorrect]" value="2"   /> Correct
                    <a href="#row2430" onclick="removeAnswer('30685')" title="Remove this solution" class="removeanswer">Delete</a>
                </span>
             </div>
            <div id="answer30686" class="answer-row">
                <textarea name="questions[0][answers][]" class="answer" tabindex="24303" placeholder="Answer or Solution">answer 53</textarea>
                <div class="right answer-image-holder">
                    <img src="no-image.jpg" id="img30686" class="answerimg" alt="image" />
                    <input type="hidden" name="questions[0][images][]" id="simg30686" value="" />
                </div>
                <span>
                    <input type="radio" name="questions[0][iscorrect]" value="3"   /> Correct
                    <a href="#row2430" onclick="removeAnswer('30686')" title="Remove this solution" class="removeanswer">Delete</a>
                </span>
             </div>
        </div>
        <a href="#row2430" onclick="return addSolution('2430')" title="Add one more solution">Add</a>
        <a href="#row2430" onclick="return removeAsk('2430','order2430')" title="Completely Delete this question">Delete this question</a>
    </div>
    <div id="question-2431">
        <input type="hidden" name="questions[1][idask]" value="2431" />
        <div class="ask-holder">
            <textarea name="questions[1][ask]" class="ask"  tabindex="24310" placeholder="Question">cau 5</textarea>
            <div class="right answer-image-holder"><img src="no-image.jpg" id="askimg2431" class="answerimg" alt="image" />
                <input type="hidden" name="questions[1][askimg]" id="saskimg2431" value="" />
            </div>
        </div>
        <div id="solution2431" class="answer-holder">
            <div id="answer30684" class="answer-row">
                <textarea name="questions[1][answers][]" class="answer" tabindex="24311" placeholder="Answer or Solution">answer 51</textarea>
                <div class="right answer-image-holder">
                    <img src="no-image.jpg" id="img30684" class="answerimg" alt="image" />
                    <input type="hidden" name="questions[1][images][]" id="simg30684" value="" />
                </div>
                <span>
                    <input type="radio" name="questions[1][iscorrect]" value="1" checked='checked'  /> Correct
                    <a href="#row2431" onclick="removeAnswer('30684')" title="Remove this solution" class="removeanswer">Delete</a>
                </span>
            </div>
            <div id="answer30685" class="answer-row">
                <textarea name="questions[1][answers][]" class="answer" tabindex="24312" placeholder="Answer or Solution">answer 52</textarea>
                <div class="right answer-image-holder">
                    <img src="no-image.jpg" id="img30685" class="answerimg" alt="image" />
                    <input type="hidden" name="questions[1][images][]" id="simg30685" value="" />
                </div>
                <span>
                    <input type="radio" name="questions[1][iscorrect]" value="2"   /> Correct
                    <a href="#row2431" onclick="removeAnswer('30685')" title="Remove this solution" class="removeanswer">Delete</a>
                </span>
             </div>
            <div id="answer30686" class="answer-row">
                <textarea name="questions[1][answers][]" class="answer" tabindex="24313" placeholder="Answer or Solution">answer 53</textarea>
                <div class="right answer-image-holder">
                    <img src="no-image.jpg" id="img30686" class="answerimg" alt="image" />
                    <input type="hidden" name="questions[1][images][]" id="simg30686" value="" />
                </div>
                <span>
                    <input type="radio" name="questions[1][iscorrect]" value="3"   /> Correct
                    <a href="#row2431" onclick="removeAnswer('30686')" title="Remove this solution" class="removeanswer">Delete</a>
                </span>
             </div>
        </div>
        <a href="#row2431" onclick="return addSolution('2431')" title="Add one more solution">Add</a>
        <a href="#row2431" onclick="return removeAsk('2431','order2431')" title="Completely Delete this question">Delete this question</a>
    </div>
    <input type="submit" value="Update" />
</form>

<script>
    $('form').submit(function(e) {
        e.preventDefault();
        showupdate('Updating...');

        $.ajax({
            type: 'POST',
            url: 'update_ask.php',
            data: $(this).serialize(),
            success: function(msg) {
                feedbackMessage(msg);
            }
        });
    });
</script>

现在你的 PHP 可能看起来像这样:

$quizID = $_POST['idquiz'];

$questions = $_POST['questions'];
var_dump($questions);

/*
This will look something like:
array(
    [0] => array(
        'answers' => array('answer 51', 'answer 52', 'answer 53'),
        'ask' => 'cau 5',
        'askimg' => '',
        'idask' => '2430',
        'images' => array('', '', ''),
        'iscorrect' => '1'
    ),
    [1] => array(
        'answers' => array('answer 51', 'answer 52', 'answer 53'),
        'ask' => 'cau 5',
        'askimg' => '',
        'idask' => '2431',
        'images' => array('', '', ''),
        'iscorrect' => '1'
    )
)
*/
于 2013-05-02T18:11:52.523 回答
0

根据请求,此示例使用 jQueryDeferred处理所有表单,根据您的需要重新设计最后一个函数/如何对帖子失败做出反应。注意不需要 ajaxStop,因为事件是由 deferreds 管理的。

$('#update-change').on('click', function (event) {
    var forms = $('form.postable');
    event.preventDefault();
    var quizIndex = 0;
    var countOfForms = forms.length;
    for (quizIndex = 0; quizIndex < countOfForms; quizIndex++) {
        saveQuiz(forms, quizIndex);
    }
});

function quizPost(quiz, dfd) {
    $.ajax({
        type: "POST",
        url: 'update_ask.php',
        dataType: "json",
        data: quiz.serialize(),
        success: dfd.resolve,
        error: dfd.reject
    }).done(function (msg) {
        feedbackMessage(msg);
    });
}

function saveQuiz(forms, quizIndex) {
    var form = forms.eq(quizIndex);
    formValid = true,
    messages = [],
    dfd = $.Deferred();
    showupdate('Updating...form ' + quizIndex);
    /*
    do a lot of client-side validation on the form here setting "valid"
   */
    if (!formValid) {
        dfd.resolve({
            success: false,
            errors: messages
        });
    } else {
        quizPost(form, dfd);
    }
    return dfd.promise();
}

saveQuiz(quizIndex).done(function (response) {
    if (response.success) {
        // saving worked; rejoice
    } else {
        // client-side validation failed
        // output the contents of response.errors
    }
}).fail(function (err) {
    // AJAX request failed
});
于 2013-05-03T13:16:53.213 回答