Javascript 如何在单击按钮时在数组中保存可编辑的div内容

我正在使用html和php创建一个网页，在这里我想显示一些问题并获得用户的答案。现在，假设我有这样一个数组中的问题

<?php 
$questions = array(
    '0' => array(
        'id'=>1,
        'q'=>'Test1'
    ),
    '1' => array(
        'id'=>2,
        'q'=>'Test2'
    ),
    '2' => array(
        'id'=>3,
        'q'=>'Test3'
    ),
    '3' => array(
        'id'=>4,
        'q'=>'Test4'
    ),
    '4' => array(
        'id'=>5,
        'q'=>'Test5'
    )
)
?>

<div class="editable" contenteditable="true" data-text="Write your answer."></div>

我的页面中有以下div

<div class="question">
    <h5 id="quest">
        <?php echo $questions[0]['q']; ?>
    </h5>
</div>

我使用下面的按钮和js函数来显示每个问题

<button onclick="javascript:SwapDivs()">
     Next
</button>

<script>
var count = 1;
function SwapDivs() {
    var questions = <?php echo json_encode($questions); ?>;
    $(document).ready(function () {
        $("h5#quest").html(questions[count]['q']);
        count++;
    });
}
</script>

下一个
var计数=1；
函数SwapDivs（）{
var问题=；
$（文档）.ready（函数（）{
$（“h5#quest”）.html（问题[计数][q']；
计数++；
});
}

在我的问题div下面，我有一个像这样的可编辑div

<?php 
$questions = array(
    '0' => array(
        'id'=>1,
        'q'=>'Test1'
    ),
    '1' => array(
        'id'=>2,
        'q'=>'Test2'
    ),
    '2' => array(
        'id'=>3,
        'q'=>'Test3'
    ),
    '3' => array(
        'id'=>4,
        'q'=>'Test4'
    ),
    '4' => array(
        'id'=>5,
        'q'=>'Test5'
    )
)
?>

<div class="editable" contenteditable="true" data-text="Write your answer."></div>

我的问题是，在显示下一个问题之前，我如何在“下一步”按钮上存储用户对每个问题的答案，以便将这些答案存储到我的数据库中

如有任何建议，将不胜感激

---

谢谢。

Javascript可以直接发布到php服务器，而无需重新加载页面。这是通过使用（纯javascript）或jquery来完成的。

尝试生成问题及其答案的json数组，然后将json数组发送到服务器以保存数据。（内联编辑风格）嗨，兰吉特·辛格，谢谢你提供的信息。你能举例说明你的意思吗？嗯，这可能是一个解决方案，但我有另一个按钮（后退按钮），因此用户可以返回到上一个问题并更改其答案。没问题，然后你只需重新发布和更新数据库