使用ajax下拉onchange答案

【问题标题】：Dropdown onchange using ajax使用ajax下拉onchange
【发布时间】：2018-02-06 14:56:11
【问题描述】：

我的表单中有一个用于过滤数据的下拉菜单。我正在使用 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);
                }
            });
        }
    });
});

然后转到 url example-domain.com 以检查是否有使用 ajax 的帖子：

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

所以过滤完成后，<div id="opt_lesson_list"></div> 内的数据应该会显示过滤后的数据。但发生的情况是，ajax 对整个页面的响应意味着我的整个表单正在倍增并显示在我用来显示 onchange 数据的 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']; 我可以得到所选下拉列表的值。

【问题讨论】：

服务器端得到什么？以及它试图发回的内容
这一切都在一个文件上吗？如果是这样，请制作 2 个文件：一个用于显示，一个用于接收和回答 ajax 请求。或排除要显示的html 如果你有一个$_POST['hps_level']
@WallSkyBlue 它发回整个 html 页面
是的，您必须使用至少两个 PHP 文件，一个仅用于 <div id="opt_lesson_list"> 的内容，另一个用于包含 <div id="opt_lesson_list"> 的主页。
您在“url:”中的端点必须能够提供只需要适合<div id="opt_lesson_list">的信息，整个页面的响应是不可能的

标签： php ajax onchange dropdown

【解决方案1】：

我的整个表单正在相乘并显示在我以前的 div 中显示 onchange 数据。

您似乎将您的 ajax url 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 文件 url 替换您的 ajax url。通过这样做，您的 ajax 将从新文件中获取所有数据并显示在您的响应 div 中。

【讨论】：

【解决方案2】：

您提供有效的 url，becz 数据过滤器到 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>

【讨论】：