如何在不使用 PHP/Javascript 刷新页面的情况下实时显示数据值？

Question

这是一个调查系统。我有一个动态下拉列表，显示我的表数据库中的一列“问题标题”。如何在不刷新页面的情况下实时单击“answer_type”列时显示其其他列“Option_1 到 Option_10”（我假设最大选项为 10）？就像如果'answer_type'是复选框，它将显示为复选框，如果它是单选按钮，它将显示单选按钮。这是我在下拉列表中显示“question_title”的代码

  $query=mysqli_query($con, "SELECT question.* FROM question LEFT JOIN category AS subcategory on subcategory.category_id = question.question_subcat WHERE question.question_category = $question AND (question.question_subcat IS NULL OR subcategory.category_id IS NOT NULL)");
        echo "<b id='labelquestion_dropdown".$i."'>Question #". $i."</b>";
        echo "<select id='question_dropdown".$i."' class='form-control-static' name='question_dropdowns".$i."'>";
        echo "<option selected>"; echo "Select"; echo "</option>";
        while($row=mysqli_fetch_array($query))
        {
                echo "<option value='$row[question_id]'>";
                echo $row["questiontitle"];
                echo "</option>";

        }
        echo "</select>";
        echo "<br />";

这是我的数据库表。

Answer 1

做一些这样的事情。

<script>
    $.ajax({
        url:'ajax.php?id=<?php $row['id']; ?>',
        success:function(data){
            if(data){
                // do what ever you want to do
            }
        }
    });
</script>

关于 AJAX.php

首先，您会根据您在 ajax url 中发送的这个 id 获得记录。

准备好你想要的结果

Answer 2

使用 Ajax 技术，然后在您的 JS 中执行此操作

$(document).on('change','.dynamic-qst',function(){
    // ajax question possible answers or rather ajax your database where id = question id
    /* $.ajax({
             url: 'getPossibleAnswers.php',
             data: {id: $(this).val()},
             success: function(response){
                  //insert the var output = '';
                  // to $('#possible-ans').html(output);
             }
    }) */
    
    // assuming we had successfully ajax it and the response is
    // for question 1 example
    var response2 = {'answer_type':'checkbox', 'option_1':'Cellphone', 'option_2':'Computer', 'option_3':'Laptop', 'option_4':'', 'option_5':'', 'option_6':'', 'option_7':'', 'option_8':'', 'option_9':'', 'option_10':''};
    
    // for question 2 example
    var response = {'answer_type':'radio', 'option_1':'Sushi', 'option_2':'Maki', 'option_3':'Sashimi', 'option_4':'Teriyaki', 'option_5':'Misono', 'option_6':'', 'option_7':'', 'option_8':'', 'option_9':'', 'option_10':''};
    
    var output = '', x;
    for(x = 1; x <= 10 ; x++)
    {
        var cur_ans = eval("response.option_" + x);
        if(response.answer_type == 'checkbox')
        {
            if(cur_ans != '')
            {
                output += '<input type="checkbox" name="ans" value="' + cur_ans + '">' + cur_ans;
            }
        }
        else if(response.answer_type == 'radio')
        {
            if(cur_ans != '')
            {
                output += '<input type="radio" name="ans" value="' + cur_ans + '">' + cur_ans;
            }
        }
    }
    $('#possible-ans').html(output);
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<select class="dynamic-qst">
    <option value selected disabled>-- Select One --</option>
    <option value="1">What gadget do you usually use?</option>
    <option value="2">What is your favorite food?</option>
</select>

<div id="possible-ans"></div>