Используя python и flask, как я могу передать аргумент динамического маршрута новому маршруту, вызываемому запросом AJAX? - PullRequest
0 голосов
/ 23 января 2019

Я создал динамический маршрут в своем приложении Python Flask для отображения динамического HTML-шаблона.В верхней части страницы есть график, который отличается для каждой страницы (переменная wins_graph).Каждая страница изначально отображается именно так, как и должна.

views.py (начальный маршрут)

@app.route('/sports/nba/<team_abbr>-spending-performance/')
def nba_spending_performance_team(team_abbr):
    team_query = NBAWinsvsSalary.query.filter_by(team_abbr=team_abbr).order_by(NBAWinsvsSalary.season).all()
    team_colors = 'RdBu'
    wins_graph = Functions.wins_plot(team_query, 'No Seasons', 'rgba(175, 27, 50, 1)', team_colors)
    return render_template('sports/nba/spending-performance-team.html', wins_graph)

sports / nba /СТЬ-performance-team.html

<header>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
</header>
<body>
    <div class="graph-container">
    <div class="graph-options">
    <label> Choose the plot type....</label>
        <span class="graph-options" id="atl_wins_graph">
            <button class="atl_wins_graph left selected" value="No Seasons">No Seasons</button>
            <button class="atl_wins_graph right" value="Seasons">Seasons</button>
        </span>
    </div>

    <div class="graph" id="wins_graph">
        <script>
            var graphs = {{wins_graph | safe}};
            Plotly.plot('wins_graph',graphs,{});
        </script>
    </div>
</div>
    <script src="{{ url_for('static', filename='js/jquery-3.3.1.js') }}"></script>
    <script src="{{ url_for('static', filename='js/plots.js') }}"></script>
</body>

Как видите, над графиком есть две кнопки.Я хочу отобразить второй график, но только при нажатии второй кнопки.Я написал вызов AJAX, чтобы справиться с этим.

plots.js

$('.atl_wins_graph').on('click',function(){

$('#selected').html(this.value);
$('.atl_wins_graph').removeClass('selected');
$(this).addClass('selected');


    $.ajax({
        url: "/spending-wins/",
        type: "GET",
        contentType: 'application/json;charset=UTF-8',
        data: { 'selected': this.value },
        dataType:"json",
        success: function (data) {
            Plotly.newPlot('wins_graph', data );
        }
    });

});

И дополнительный маршрут для соответствия новому графику.

views.py (ДополнительноМаршрут)

@app.route('/spending-wins/', methods=['GET', 'POST'])
def spending_change_wins():
    feature = request.args['selected']
    team_color = 'rgba(175, 27, 50, 1)'
    team_colors = 'RdBu'
    team_query = NBAWinsvsSalary.query.filter_by(team_abbr=team_abbr).order_by(NBAWinsvsSalary.season).all()
    graphJSON = wins_plot(team_query, feature, team_color, team_colors)
    return graphJSON

Проблема связана с переменной team_query в дополнительном маршруте, поскольку я не определил team_abbr.

Полученная ошибка:

NameError: name 'team_abbr' is not defined

Я понимаю, почему я получаю эту ошибку.Если я определяю team_abbr с фактическим значением из базы данных, все работает так, как должно.Но это не разумное решение, потому что теперь маршрут не является динамическим.

Я просто не могу понять, как передать аргумент team_abbr из исходного маршрута в дополнительный маршрут без необходимости использовать перенаправление,Любая помощь будет принята с благодарностью.

Ответы [ 2 ]

0 голосов
/ 23 января 2019

Вы можете сохранить аббревиатуру команды как атрибут HTML5 data и передать аббревиатуру обратно как часть значения ajax data:

В views.py передайте аббревиатуру команды в шаблон:

@app.route('/sports/nba/<team_abbr>-spending-performance/')
def nba_spending_performance_team(team_abbr):
   team_query = NBAWinsvsSalary.query.filter_by(team_abbr=team_abbr).order_by(NBAWinsvsSalary.season).all()
   team_colors = 'RdBu'
   wins_graph = Functions.wins_plot(team_query, 'No Seasons', 'rgba(175, 27, 50, 1)', team_colors)
   return render_template('sports/nba/spending-performance-team.html', wins_graph, abbrev=team_abbr)   

В spending-performance-team.html визуализируйте значение abbrev как атрибут data для каждой кнопки:

<span class="graph-options" id="atl_wins_graph">
   <button class="atl_wins_graph left selected" value="No Seasons" data-abbr="{{abbrev}}">No Seasons</button>
   <button class="atl_wins_graph right" value="Seasons" data-abbr="{{abbrev}}">Seasons</button>
</span>

Теперь, в plots.js, обновите ключ data запроса ajax:

$.ajax({
    url: "/spending-wins/",
    type: "GET",
    contentType: 'application/json;charset=UTF-8',
    data: { 'selected': this.value, 'abbr':$(this).data('abbr')},
    dataType:"json",
    success: function (data) {
        Plotly.newPlot('wins_graph', data );
    }
});

Наконец, в views.py (Дополнительный маршрут):

@app.route('/spending-wins/', methods=['GET', 'POST'])
def spending_change_wins():
  feature = request.args['selected']
  team_color = 'rgba(175, 27, 50, 1)'
  team_colors = 'RdBu'
  team_query = NBAWinsvsSalary.query.filter_by(team_abbr=request.args.get('abbr')).order_by(NBAWinsvsSalary.season).all()
  graphJSON = wins_plot(team_query, feature, team_color, team_colors)
  return graphJSON
0 голосов
/ 23 января 2019

В sports/nba/spending-performance-team.html создайте скрытый ввод со значением team_abbr, передаваемый как win_graph в nba_spending_performance_team контроллере. Затем пусть JS получит это значение (что-то вроде $("#team-abbr").value) и передаст его в качестве аргумента в ajax, а затем, как и в случае с выбранным, у вас будет сокращение команды.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...