首頁猿問如何根據(jù)下拉菜單選擇后通過ajax...

如何根據(jù)下拉菜單選擇后通過ajax獲取后臺數(shù)據(jù)并且不刷新頁面

JavaScript

紅糖糍粑 2018-09-15 10:09:15

我想通過一組下拉菜單，然后取選擇其中的一個的時候，根絕選擇的列表標題篩選出符合條件的列表，展示在下面的頁面中，請問代碼怎么實現(xiàn)

查看完整描述

1 回答

吃雞游戲

TA貢獻1829條經(jīng)驗獲得超7個贊

大概有如下幾個步驟：

獲取到選中下拉菜單的值(ID/標題，一般情況下會獲取ID，到后臺根據(jù)這個ID到數(shù)據(jù)庫獲取對應(yīng)的數(shù)據(jù))
發(fā)送到后端
后端根據(jù)前端發(fā)送的參數(shù)取值，查詢數(shù)據(jù)庫，然后組裝成你想要的格式類型，返回給前端
前端實行html操作（內(nèi)容更新）
代碼實現(xiàn)如下(用的jQuery)

<script type="text/javascript">
    $("select").change(function() {        var title = $(this).text();  // 1、獲取選擇下拉框的標題
        //var id  = $(this).val();  獲取選中的ID值
        var url   = "";  //這里填寫后端的url 
        $.ajax({   //2、發(fā)送給后端
            url: url, 
            type: 'POST',  //設(shè)置發(fā)送的方式 這里假設(shè)為POST
            dataType: 'html',  //返回的數(shù)據(jù)類型
            data: {title: title},  //把選中的標題發(fā)給后端
            success:function(data) {                // 4、這里寫成功后更新頁面的操作
            }
        })
    });</script>

<?php$title = $_POST['title']; //接收參數(shù)  選中的ID或者標題//3、根據(jù)這個標題或者ID 去數(shù)據(jù)庫查詢匹配到的相關(guān)的內(nèi)容 然后根據(jù)需求組裝成html格式

echo $html;  //返回給前端exit;

反對回復(fù) 2018-10-29