时间戳

首页 > 解决方案 > 在控制器中获取阻止渲染模板

json - 在控制器中获取阻止渲染模板

问题描述

我正在为一个班级做一个项目，并且我有我正在编辑的入门代码。他们应该工作的方式是，当用户创建一个场所时，它会转到主页，并显示一条消息说场所 x 已列出。一旦我在 new_venue.html 中添加了发布请求，在我单击提交按钮后它什么也不做，但我知道它在做某事，因为 app.py 打印了注册的名称。

下面是来自 new_venue.html 的代码。

我添加了脚本部分和发布请求

    {% extends 'layouts/main.html' %}
{% block title %}New Venue{% endblock %}
{% block content %}
  <div class="form-wrapper">
    <form id="venueInfo" method="post" class="form">
      <h3 class="form-heading">List a new venue <a href="{{ url_for('index') }}" title="Back to homepage"><i class="fa fa-home pull-right"></i></a></h3>
      <div  class="form-group">
        <label for="name">Name</label>
        {{ form.name(id='name', class_ = 'form-control', autofocus = true) }}
      </div>
      <div class="form-group">
          <label>City & State</label>
          <div class="form-inline">
            <div id='city' class="form-group">
              {{ form.city(class_ = 'form-control', placeholder='City', autofocus = true) }}
            </div>
            <div id='state' class="form-group">
              {{ form.state(class_ = 'form-control', placeholder='State', autofocus = true) }}
            </div>
          </div>
      </div>
      <div id='address' class="form-group">
        <label for="address">Address</label>
        {{ form.address(class_ = 'form-control', autofocus = true) }}
      </div>
      <div id='phone_num' class="form-group">
          <label for="phone">Phone</label>
          {{ form.phone(class_ = 'form-control', placeholder='xxx-xxx-xxxx', autofocus = true) }}
        </div>
      <div id="genres" class="form-group">
        <label for="genres">Genres</label>
        <small>Ctrl+Click to select multiple</small>
        {{ form.genres(class_ = 'form-control', autofocus = true) }}
      </div>
      <div id="fb_link" class="form-group">
          <label for="genres">Facebook Link</label>
          {{ form.facebook_link(class_ = 'form-control', placeholder='http://', autofocus = true) }}
        </div>
      <input type="submit" value="Create Venue" class="btn btn-primary btn-lg btn-block">
    </form>

    <script type="text/javascript">

      document.getElementById("venueInfo").onsubmit=function(e){
        e.preventDefault();
        fetch('/venues/create',{
        method:'POST',
        body:JSON.stringify({
          'name': document.getElementById('name').value,
          'city': document.getElementById('city').value,
          'state': document.getElementById('state').value,
          'address': document.getElementById('address').value,
          'phone_num': document.getElementById('phone_num').value,
          'genres': document.getElementById('genres').value,
          'fb_link': document.getElementById('fb_link').value,
      }),
        headers: {'Content-type': 'application/json'}
      })
      .then(function(){
      })
    }

    </script>


  </div>

{% endblock %}

下面是来自 app.py 的代码

    @app.route('/venues/create', methods=['GET'])
def create_venue_form():
  form = VenueForm()
  return render_template('forms/new_venue.html', form=form)

@app.route('/venues/create', methods=['POST'])
def create_venue_submission():
  name = request.get_json()['name']
  print(name)

  flash('Venue ' + request.form['name'] + ' was successfully listed!')

  return render_template('pages/home.html')

标签： jsonflask

解决方案

flash消息与重定向一起使用，请参阅https://flask.palletsprojects.com/en/1.1.x/patterns/flashing/#simple-flashing

所以代替渲染模板，将重定向对象返回到主页：

@app.route('/venues/create', methods=['POST'])
def create_venue_submission():
  # name = request.get_json()['name']
  name = request.values.get('name')

  print(name)

  flash('Venue ' + request.form['name'] + ' was successfully listed!')

  #  return render_template('pages/home.html')
  return redirect(url_for('home'))  # -- HERE --

更新

我认为你做错了事，你不需要 javascript 通过 ajax post 提交表单数据，因为 ajax 用于更新页面而不重新加载它（顺便说一句，你没有在.then(function(){})回调中添加任何逻辑来显示消息），但是在提交表单后，您希望使用 Flash 消息将用户重定向到主页，因此您使用的 ajax 方法是错误的方法，只需删除或注释 javascript 代码块并将操作添加到表单

<form id="venueInfo" method="post" action="{{ url_for('create_venue_submission') }}" class="form">

...

在你的功能中create_venue_submission()你应该改变

name = request.get_json()['name']

至

name = request.values.get('name')

# other fields
name = request.values.get('name')
city = request.values.get('city')
state = request.values.get('state')
address = request.values.get('address')
phone_num = request.values.get('phone_num')
genres = request.values.get('genres')
fb_link = request.values.get('fb_link')

看到这个维基https://stackoverflow.com/a/16664376/12368419

推荐阅读