Question

我想做一个按钮，点击后可以获得我数据库中的下五个问题。我不想使用分页和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>

Answer 1

好的，我终于解决了这一切。

我认为$('#questionnaire').replaceWidth正在摧毁对div的引用。我用

替换了它

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

一切正常。

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

1 个答案: