使用Ajax進行下拉式onchange

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);
                }
            });
        }
    });
});

然后轉到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']; 我可以獲得所選下拉菜單的值。

Answer 1

您提供有效的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> 

Answer 2

我的整個表單正在乘法並顯示在用於顯示onchange數據的div中。

好像您將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文件網址替換您的ajax url網址。 這樣，您的ajax將從新文件中獲取所有數據，並顯示在您的響應div中。