使用 ajax 和 jQuery 根据在 Flask 的第一个下拉列表中选择的值填充第二个下拉列表

Lin*_*ser 6 python ajax jquery flask flask-sqlalchemy

我对此无所适从。任何有关这方面的帮助将不胜感激!

我有经理和员工的两个下拉菜单。

默认情况下,经理下拉列表包含经理列表。

我想通过使用用户在 Managers 下拉列表中选择的 Manager 名称查询 SQL Server 数据库来使用员工名称填充 Employees 下拉列表。

因此,例如,如果一个人在“经理”下拉列表中选择 Tom 作为经理,那么“员工”下拉列表应填充“员工”姓名,其中经理 = Tom。

到目前为止,我有以下代码:

路由(我用来查询 SQL Server 数据库以根据经理姓名获取员工列表):

@app.route ('/getEmployees', methods=['GET'])
def getEmployees():
    engine = create_engine('mssql+pyodbc://<server name>/<DB name>?driver=SQL+Server+Native+Client+11.0')
    Base = declarative_base(engine)

    class Bookmarks(Base):
        __tablename__ = '<table name>'
        Employee = Column(String(50))
        __table_args__ = {'autoload': True}

        def __repr__(self):
            return '{} '.format(self.Employee)

    def loadSession():
        metadata = Base.metadata
        Session = sessionmaker(bind=engine)
        session = Session()
        return session
    if __name__ == "__main__":
        session = loadSession()
        return session.query(Bookmarks).filter_by(Manager='<I want to populate this with the manager name a user selects in the Manager dropdown>')
Run Code Online (Sandbox Code Playgroud)

index.html 中的管理器下拉菜单

<div class="form-group">
  <select class="form-control" id="next" name="division" data-error="Required!" required>
    <option value="default" disabled selected>Select something</option>
    <option value="option1">Tom</option>
    <option value="option2">Bob</option>
  </select>  
</div>
Run Code Online (Sandbox Code Playgroud)

app.py 中的员工下拉菜单

Employees = QuerySelectField('Employees', query_factory=getEmployees, allow_blank=True)
Run Code Online (Sandbox Code Playgroud)

在 index.html

<div class="form-group" id="sel_user">
    {{ render_field(form.Employees,class="form-control", required="required") }}
</div>
Run Code Online (Sandbox Code Playgroud)

我正在使用 jQuery 和 ajax 来获取用户在管理器下拉列表中选择的管理器名称,然后用它做一些事情..

$(document).ready(function(){

    $("#next").change(function() {

        var Manager=($('#next option:selected').text());
        console.log(Manager);

        $.ajax({
            url: "/getEmployees",
            type: 'GET',
            contentType: 'application/json',
            dataType: 'json',
            // not sure what to do next..?
        });
    });
});
Run Code Online (Sandbox Code Playgroud)

一旦我拥有用户在“经理”下拉列表中选择的值,任何人都可以帮助我下一步该怎么做?

A. *_*ias 3

我想你已经快到了。我不知道python或flask,但我可以给你主要的想法。

  1. 当您选择管理器时,您将获得管理器名称,并且必须在 ajax 调用中发送该名称,以便您可以在路由代码中获取它并使用它来过滤数组。data您可以使用ajax 调用的参数发送该值...

    $(document).ready(function(){
    
        $("select#next").change(function() {
    
            var managerName = $(this).find('option:selected').text();
    
            $.ajax({
                type: 'GET',
                url: "/getEmployees",
                data: { manager: managerName }
                contentType: 'application/json',
                dataType: 'json'
            });
        });
    });
    
    Run Code Online (Sandbox Code Playgroud)
  2. 在 ajax 调用中,创建一个成功回调函数,当您收到成功响应时将调用该函数。像这样的东西...

    $(document).ready(function(){
    
        $("select#next").change(function() {
    
            var managerName = $(this).find('option:selected').text();
    
            $.ajax({
                type: 'GET',
                url: "/getEmployees",,
                data: { manager: managerName }
                contentType: 'application/json',
                dataType: 'json',
                success: function(response) {
                }
            });
        });
    });
    
    Run Code Online (Sandbox Code Playgroud)
  3. 您还可以添加一个检查来验证您是否选择了经理或未选择。如果您取消选择经理,您可以清空员工选择、禁用它、显示所有员工或任何您想要的。

    $(document).ready(function(){
    
        $("select#next").change(function() {
    
            if ($(this).val() != 'default') {
    
                var managerName = $(this).find('option:selected').text();
    
                $.ajax({
                    type: 'GET',
                    url: "/getEmployees",,
                    data: { manager: managerName }
                    contentType: 'application/json',
                    dataType: 'json',
                    success: function(response) {
                    }
                });
            }
            else {  // No manager selected.
                // Do what you wnat when there's no manager selected.
                // For example, if you'd want to empty and disable the employees select...
                $('select#sel_user').html('').prop('disabled',true);
            }
        });
    });
    
    Run Code Online (Sandbox Code Playgroud)

由于我缺乏对 python/flask 的了解,现在我有问题可以帮助你:

  • 在您的 Route 代码中,您必须读取manager通过 G​​ET ajax 调用发送的参数。我不知道你如何在 python/flask 中做到这一点,但它必须很容易。在 php 中只是$_GET['manager']. 快速搜索一下,看起来可能是这样的request.GET['username'],但你会比我更了解它。您必须获取该参数并将该值放在最后一个返回行中,例如......

    return session.query(Bookmarks).filter_by(Manager=request.GET['username'])
    
    Run Code Online (Sandbox Code Playgroud)
  • 我不清楚此响应的格式,所以我不知道如何提取信息来创建员工选择。查看您的 ajax 调用,您说响应是 JSON 格式,但我需要查看该响应的示例来向您展示确切的代码。这个想法是,您必须获取该信息并在 ajax 调用的成功函数中创建选项,然后将该选项放入员工选择中。就像是...

    // Imagine that your response is an array of objects similar to this
    // [{"name": "Tommy", "other": "value10"},{"name": "Jim", "other": "value32"},...]
    
    success: function(response) {
    
        var options = [];
        for (var i=0, l=response.length; i<l; i++)
            options.push('<options value="'+response[i].other+'">'+response[i].name+'<options>');
    
        $('select#sel_user').html(options.join(''));
    }
    
    Run Code Online (Sandbox Code Playgroud)

我认为有了这一切,您就可以了解如何继续,并根据您的具体需求进行调整。我希望它有帮助。