javascript – So erhalten Sie Hintergrunddaten über Ajax basierend auf der Dropdown-Menüauswahl, ohne die Seite zu aktualisieren

Ich möchte eine Reihe von Dropdown-Menüs verwenden und wenn ich eines davon auswähle, möchte ich die Liste herausfiltern, die die Bedingungen basierend auf dem ausgewählten Listentitel erfüllt, und sie auf der Seite unten anzeigen Das erreiche ich mit dem Code?

Antwortinhalt:

Ich möchte eine Reihe von Dropdown-Menüs verwenden und wenn ich eines davon auswähle, möchte ich die Liste herausfiltern, die die Bedingungen basierend auf dem ausgewählten Listentitel erfüllt, und sie auf der Seite unten anzeigen Das erreiche ich mit dem Code?

<code>$('select').change(function(){//监控select的change事件
    var dom = document.getElementById('id'),
    data = dom.options[dom.selectedIndex].value;//选中的option的value；

    ajax({});
    
});</code>

Es gibt wahrscheinlich die folgenden Schritte:

1. Erhalten Sie den Wert des ausgewählten Dropdown-Menüs (ID/Titel, normalerweise wird die ID abgerufen) und gehen Sie in den Hintergrund, um auf dieser Grundlage die entsprechenden Daten aus der Datenbank abzurufen ID)

2. wird an das Backend

gesendet

3. Das Backend nimmt den Wert der vom Frontend gesendeten Parameter, fragt die Datenbank ab, fügt ihn dann in den gewünschten Formattyp zusammen und gibt ihn an das Frontend zurück

4. Das Frontend implementiert HTML-Vorgänge (Inhaltsaktualisierung)

5. Der Code wird wie folgt implementiert (mit jQuery)

<code><script type="text/javascript">
    $("select").change(function() {
        var title = $(this).text();  // 1、获取选择下拉框的标题
        //var id  = $(this).val();  获取选中的ID值
        var url   = "";  //这里填写后端的url 
        $.ajax({   //2、发送给后端
            url: url, 
            type: 'POST',  //设置发送的方式 这里假设为POST
            dataType: 'html',  //返回的数据类型
            data: {title: title},  //把选中的标题发给后端
            success:function(data) {
                // 4、这里写成功后更新页面的操作
            }
        })
    });
</script></code>

<code><?php
$title = $_POST['title']; //接收参数  选中的ID或者标题

//3、根据这个标题或者ID 去数据库查询匹配到的相关的内容 然后根据需求组装成html格式

echo $html;  //返回给前端
exit;</code>

Es kann in drei Schritte unterteilt werden:

<code>1、ajax请求后端接口，接口返回数据。（一般返回json）
2、ajax在回调函数里面，解析数据。
3、把数据写到页面，看你情况用html还是append</code>

Was für eine umfassende Frage; verstehen Sie zuerst die folgende „js-Vorlage“;

<code>$("select").onchange(function(){
    console.log($(this).val());//这里的this.val 就是当前选中的option的val 根据这个val 进行逻辑判断
})</code>

Es wird empfohlen, sich dort anzumelden und eine Funktion zu schreiben, um den Wert zu übergeben, um logische Operationen auszuführen

Die Antworten oben sind alle sehr gut, es ist nichts anderes als das Onchange-Ereignis von Javascript