创建按钮,在同一页面上显示来自数据库的下5个结果


Creating button that show the next 5 results from the database on the same page?

我想做一个按钮,当点击得到接下来的五个问题在我的数据库。我不想使用分页和GET方法,因为我不希望用户在回答了之前的问题后能够返回到前面的问题。

我希望问题被加载在同一页面上。我刚开始阅读有关jQuery AJAX和所有这些,似乎答案就在那里,但我不能把我的头围绕它。但也许还有别的办法。

编辑:经过一些修改,我设法有一些改进。现在,当我点击下一个按钮,它加载下五个结果预期,但它只做一次。当我再次点击它,它加载相同的结果。

Questionnaire.php

<?php
        if (!isset($_POST['questionnaire'])) {
            ?>
            <form id="ageGender" method="post" action="" onsubmit="return CheckSubmit(this)">
                <div id ="age" >  Age  : <input type="text" name = "age" onblur="CheckAge(this)"/></div>
                <div id ="gender">Sexe : 
                    <input type="radio" name="gender" value="homme"/> Homme
                    <input type="radio" name="gender" value="femme"/> Femme   
                </div>
                <input type="hidden" value="0" name="debut"/>
                <input type="submit" value="Passer au questionnaire" name="questionnaire"/>
                <?php
            } else {
                echo " <input type='text' value='0' name='start'/>";
                echo "<div id='questionnaire' >";
                include 'allQuestions.php';
                echo "</div>";
                echo "<input type='button' id='next' value='Suite'/>";
            }
            ?>
            <script type="text/javascript"> $('body').on('click', '#next', UpdateQuestion);
                function UpdateQuestion()
                {
                    var debut = parseInt($('input[name=start]').val()) + parseInt(5);

                    $('input[name=start]').val(debut);
                    console.log(debut);
                    console.log($('input[name=start]').val());

                    $.ajax(
                            {
                                type: 'POST',
                                url: 'allQuestions.php',
                                data: {debut: debut},
                                success: function (data)
                                {
                                    // console.log(data);
                                    debut = data.debut;
                                    //  console.log(data.debut);
                                    $('#questionnaire').replaceWith(data);
                                }
                            }
                    );
                }
            </script>
        </form>

好了,这一切终于解决了。

我猜想$('#questionnaire').replaceWidth正在破坏div的ref。我用

代替它
$('#questionnaire').empty();
$('#questionnaire').append(data);

一切正常