首頁(yè) 猿問(wèn) 如何根據(jù)下拉菜單選擇后通過(guò)ajax...

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

JavaScript

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

我想通過(guò)一組下拉菜單，然后取選擇其中的一個(gè)的時(shí)候，根絕選擇的列表標(biāo)題篩選出符合條件的列表，展示在下面的頁(yè)面中，請(qǐng)問(wèn)代碼怎么實(shí)現(xiàn)

查看完整描述

1 回答

吃雞游戲

TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超7個(gè)贊

大概有如下幾個(gè)步驟：

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

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

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

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

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