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

Question

我正在使用 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，

<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>

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

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

我的问题是，在向他显示下一个问题之前，如何在单击下一个按钮时存储用户对每个问题的答案，以便将这些答案存储到我的数据库中？

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

谢谢。

Answer 1

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