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

Question

I want to do a button which when clicked get the next five questions in my database. I don't want to use pagination and GET method cause I don't want the user to be able to get back to the previous questions once he answered them.

I want the questions to be loaded on the same page. I just started reading about jQuery AJAX and all that and it seems that the answer is there, but i can't wrapped my head around it. But maybe there is an other way.

EDIT : After a few changes i manage to have some improvements. Now when i click the next button it loads the next five results as intended but it only do it once. When i click it again it loads the same result.

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>

Answer 1

Ok i finally resolved all of this.

I suppose the $('#questionnaire').replaceWidth was destroying the ref to the div. I replaced it by

$('#questionnaire').empty();
$('#questionnaire').append(data);

And everything works fine.