Question

我的表单中有一个下拉列表，用于过滤数据。我正在使用ajax onchange函数来根据所选列表过滤数据。

我的下拉列表看起来像这样：

<select id="opt_level" name="opt_level">
    <option value="level1">Level 1</option>
    <option value="level2">Level 2</option>
    <option value="level3">Level 3</option>
</select>

这是我想要显示onchange数据的div：

<div id="opt_lesson_list">
    <!-- Some statement here -->
</div>

当下拉列表中有onchange时，它将通过此ajax函数：

jQuery(document).ready(function($) {
    $("#opt_level").on('change', function() {
        var level = $(this).val();
        if(level){
            $.ajax ({
                type: 'POST',
                url: 'example-domain.com',
                data: { hps_level: '' + level + '' },
                success : function(htmlresponse) {
                    $('#opt_lesson_list').html(htmlresponse);
                    console.log(htmlresponse);
                }
            });
        }
    });
});

转到网址example-domain.com以检查是否有来自ajax的帖子：

if(isset($_POST['hps_level'])){
    // Statement to select from database
}

因此，在完成过滤后，<div id="opt_lesson_list"></div>内的数据应显示已过滤的数据。但是发生了什么，ajax对整个页面的响应意味着我的整个表单在我用来显示更改数据的div中相乘并显示。

修改

我的PHP只是根据所选的值过滤数据库中的数据：

if(isset($_POST['hps_level'])){
    $sql = "SELECT DISTINCT(hps_lessons) FROM holiday_program_setup WHERE hps_level = '".$_POST['hps_level']."'";
    $result = $conn->query($sql);

    if ($result->num_rows > 0) {
        while($row = $result->fetch_assoc()) {
            echo '<ul class="list-unstyled subjects">';
            echo '<li class="bordered" style="width: 30%;">';
            echo $row['hps_lessons'];
            echo '</li>';
            echo '</ul>';
        }
    }
    $sql = NULL;
}

如果我echo $_POST['hps_level'];我可以获得所选下拉列表的值。

Answer 1

您提供有效的网址，因为数据过滤到hps_level

jQuery(document).ready(function($) {
    $("#opt_level").on('change', function() {
        var level = $(this).val();
        alert(level);
        if(level){
               $.ajax ({
                type: 'POST',
                url: 'example-domain.com',
                data: { hps_level: '' + level + '' },
                success : function(htmlresponse) {
                    $('#opt_lesson_list').append(htmlresponse);
                    alert(htmlresponse);
                },error:function(e){
                alert("error");}
            });
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="opt_level" name="opt_level">
    <option value="level1">Level 1</option>
    <option value="level2">Level 2</option>
    <option value="level3">Level 3</option>
</select>

<div id="opt_lesson_list">
    <!-- Some statement here -->
</div>

Answer 2

我的整个表格在我以前的div中相乘并显示显示转换数据。

您似乎将ajax网址example-domain.com指向您所有html网页所在的网页，而ajax将整个html网页返回到您的div响应<div id="opt_lesson_list"></div>。

尝试创建另一个空白的php页面，并将您的php isset代码放入新的php文件中。

if(isset($_POST['hps_level'])){
    // Statement to select from database
}

用新的php文件网址替换你的ajax url。通过这样做，您的ajax将从新文件中获取所有数据并显示在您的响应div中。

使用ajax下载onchange

2 个答案: