我想做一个按钮,当点击得到接下来的五个问题在我的数据库。我不想使用分页和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);
一切正常