最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

[已解决]Flask中Jinja中如何提交表单数据

Flask crifan 1437浏览 0评论

Flask的Jinja中,已有对应的template的html:

<!– Scrollable page content–>
<div class="page-content">
    <div class="list-block">
        <ul>
            <li>
                <div class="item-content">
                    <div class="item-inner">
                        <div class="item-title label">标题</div>
                        <div class="item-input">
                            <input type="text" placeholder="标题" />
                        </div>
                    </div>
                </div>
            </li>
            <!–<li>
                <div class="item-content">
                    <div class="item-inner">
                        <div class="item-title label">起始日期时间</div>
                        <div class="item-input">
                            <input readonly id="datetimepicker" type="text" >
                        </div>
                    </div>
                </div>
            </li>–>
            <li>
                <div class="item-content">
                    <div class="item-inner">
                        <div class="item-title label">起始时间</div>
                        <div class="item-input">
                            <input type="text" placeholder="选取起始时间" readonly id="picker-date">
                        </div>
                    </div>
                </div>
                <div id="picker-date-container"></div>
            </li>
            <li>
                <div class="item-content">
                    <div class="item-inner">
                        <div class="item-title label">截止时间</div>
                        <div class="item-input">
                            <input type="text" placeholder="选取截止时间" readonly id="picker-date1">
                        </div>
                    </div>
                </div>
                <div id="picker-date-container1"></div>
            </li>
            <li>
                <div class="item-content">
                    <div class="item-inner">
                        <div class="item-title label">地点</div>
                        <div class="item-input">
                            <input type="email" placeholder="地点"/>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="item-content">
                    <div class="item-inner">
                        <div class="item-title label">人数上限</div>
                        <div class="item-input">
                            <input type="tel" placeholder="人数上限"/>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="item-content">
                    <div class="item-inner">
                        <div class="item-title label">是否公开</div>
                        <div class="item-input">
                            <label class="label-switch">
                                <input type="checkbox"/>
                                <div class="checkbox"></div>
                            </label>
                        </div>
                    </div>
                </div>
            </li>
            <li class="align-top">
                <div class="item-content">
                    <div class="item-inner">
                        <div class="item-title label">描述</div>
                        <div class="item-input">
                            <textarea></textarea>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="item-content">
                    <div class="item-inner">
                        <div class="item-title label">提醒时间</div>
                        <div class="item-input">
                            <select>
                                <option>不提醒</option>
                                <option>事件发生时</option>
                                <option>5分钟前</option>
                                <option>15分钟前</option>
                                <option>30分钟前</option>
                                <option>1小时前</option>
                                <option>2小时前</option>
                                <option>1天前</option>
                                <option>2天前</option>
                                <option>1周前</option>
                            </select>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <div class="cr-mask"></div>
    </div>
    <div class="content-block">
        <div class="row">
            <div class="col-100">
                <input type="submit" value="Submit" class="button button-big button-fill color-green"/>
            </div>
        </div>
    </div>
</div>

现在需要:

获取表单提交的时候的值

并且重定向,跳转页面,回到主界面

 jinja form submit

python – How to get data from a form to jinja2 – Stack Overflow

Step 6: The Templates — Flask Documentation (0.11)

python – Flask: How do I place Forms in Base jinja2 Template? – Stack Overflow

Flask/Jinja2 form submit button not working – Stack Overflow

Primer on Jinja Templating – Real Python

才注意到:

别人都是form

但是我此处的,不是form

而是

<div class="list-block">

The IT Blog » Render Bootstrap 3 forms with WTForms and Jinja

Handling forms — Explore Flask 1.0 documentation

Jinja2 macro to render bootstrap3 forms. Explanation is over here: http://bear-z.com/python/render-bootstrap-3-forms-with-wtforms-and-jinja/

[已解决]HTML中form,input,submit的关系

然后用:

/Users/crifan/dev/dev_root/daryun/SIPEvents/sourcecode/flask/sipevents/templates/creatEvent.html

<form action="{{ url_for("creat_event", form=form) }}" method="POST">
    <div class="list-block">
        <ul>
            。。。
        </ul>
        <div class="cr-mask"></div>
    </div>
    <div class="content-block">
        <div class="row">
            <div class="col-100">
                <input type="submit" value="Submit" class="button button-big button-fill color-green"/>
            </div>
        </div>
    </div>
</form>

/Users/crifan/dev/dev_root/daryun/SIPEvents/sourcecode/flask/sipevents/views.py

@app.route(‘/creat_event’, methods=[‘GET’, ‘POST’])
def creat_event():
    requestMethod = request.method
    app.logger.debug(‘requestMethod=%s’, requestMethod)
    requestArgs = request.args
    app.logger.debug(‘requestArgs=%s’, requestArgs)
    curUser = request.args.get("curUser", "")
    app.logger.debug(‘curUser=%s’, curUser)
    if request.method == ‘POST’:
        return redirect(url_for(‘index’))
    else:
        return render_template("creatEvent.html", curUser = curUser)

是可以实现:

点击Submit按钮后,跳转到对应的creat_event

得到是POST方法的,然后跳转回到主页的:

DEBUG in views [/usr/share/nginx/html/SIPEvents/sipevents/views.py:298]:
requestMethod=POST

<div–<——————————————————————————

<div–<——————————————————————————

DEBUG in views [/usr/share/nginx/html/SIPEvents/sipevents/views.py:300]:
requestArgs=ImmutableMultiDict([(‘form’, u”)])

<div–<——————————————————————————

<div–<——————————————————————————

DEBUG in views [/usr/share/nginx/html/SIPEvents/sipevents/views.py:302]:
curUser=

但是很明显:

此处的form是空的。

即没有得到提交表单的时候的各个参数。

然后通过:

request.form

就获得了对应的提交的参数了。

其中获得单个参数,可以用request.form.get

对应的代码:

/Users/crifan/dev/dev_root/daryun/SIPEvents/sourcecode/flask/sipevents/views.py

@app.route(‘/creat_event’, methods=[‘GET’, ‘POST’])
def creat_event():
    requestMethod = request.method
    app.logger.debug(‘requestMethod=%s’, requestMethod)
    requestArgs = request.args
    app.logger.debug(‘requestArgs=%s’, requestArgs)
    curUser = request.args.get("curUser", "")
    app.logger.debug(‘curUser=%s’, curUser)
    if request.method == ‘POST’:
        requestForm = request.form
        app.logger.debug("requestForm=%s", requestForm)
        title               = requestForm.get("title", "")
        start_date          = requestForm.get("start_date", "")
        end_date            = requestForm.get("end_date", "")
        location            = requestForm.get("location", "")
        max_user_num        = requestForm.get("max_user_num", "")
        is_public           = requestForm.get("is_public", "")
        description         = requestForm.get("description", "")
        notification_time   = requestForm.get("notification_time", "")
        app.logger.debug("title=%s, start_date=%s, end_date=%s, location=%s, max_user_num=%s, is_public=%s, description=%s, notification_time=%s",
                         title, start_date, end_date, location, max_user_num, is_public, description, notification_time)
        return redirect(url_for(‘index’))
    else:
        return render_template("creatEvent.html", curUser = curUser)

/Users/crifan/dev/dev_root/daryun/SIPEvents/sourcecode/flask/sipevents/templates/creatEvent.html

<form action="{{ url_for("creat_event", curUser=curUser) }}" method="POST">
    <div class="list-block">
        <ul>
            <li>
                <div class="item-content">
                    <div class="item-inner">
                        <div class="item-title label">标题</div>
                        <div class="item-input">
                            <input type="text" name="title" placeholder="标题" />
                        </div>
                    </div>
                </div>
            </li>
            <!–<li>
                <div class="item-content">
                    <div class="item-inner">
                        <div class="item-title label">起始日期时间</div>
                        <div class="item-input">
                            <input readonly id="datetimepicker" type="text" >
                        </div>
                    </div>
                </div>
            </li>–>
            <li>
                <div class="item-content">
                    <div class="item-inner">
                        <div class="item-title label">起始时间</div>
                        <div class="item-input">
                            <input type="text" name="start_date" placeholder="选取起始时间" readonly id="picker-date">
                        </div>
                    </div>
                </div>
                <div id="picker-date-container"></div>
            </li>
            <li>
                <div class="item-content">
                    <div class="item-inner">
                        <div class="item-title label">截止时间</div>
                        <div class="item-input">
                            <input type="text" name="end_date" placeholder="选取截止时间" readonly id="picker-date1">
                        </div>
                    </div>
                </div>
                <div id="picker-date-container1"></div>
            </li>
            <li>
                <div class="item-content">
                    <div class="item-inner">
                        <div class="item-title label">地点</div>
                        <div class="item-input">
                            <input type="text" name="location" placeholder="地点"/>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="item-content">
                    <div class="item-inner">
                        <div class="item-title label">人数上限</div>
                        <div class="item-input">
                            <!–<input type="text" name="max_user_num" placeholder="人数上限"/>–>
                            <input type="number" name="max_user_num" placeholder="人数上限"/>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="item-content">
                    <div class="item-inner">
                        <div class="item-title label">是否公开</div>
                        <div class="item-input">
                            <label class="label-switch">
                                <input type="checkbox" name="is_public" />
                                <div class="checkbox"></div>
                            </label>
                        </div>
                    </div>
                </div>
            </li>
            <li class="align-top">
                <div class="item-content">
                    <div class="item-inner">
                        <div class="item-title label">描述</div>
                        <div class="item-input" name="description">
                            <textarea></textarea>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="item-content">
                    <div class="item-inner">
                        <div class="item-title label">提醒时间</div>
                        <div class="item-input" name="notification_time" >
                            <select>
                                <option>不提醒</option>
                                <option>事件发生时</option>
                                <option>5分钟前</option>
                                <option>15分钟前</option>
                                <option>30分钟前</option>
                                <option>1小时前</option>
                                <option>2小时前</option>
                                <option>1天前</option>
                                <option>2天前</option>
                                <option>1周前</option>
                            </select>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <div class="cr-mask"></div>
    </div>
    <div class="content-block">
        <div class="row">
            <div class="col-100">
                <input type="submit" value="Submit" class="button button-big button-fill color-green"/>
            </div>
        </div>
    </div>
</form>

填写了内容:

提交后:

是可以收到对应的基本的参数的:

对应的log:

DEBUG in views [/usr/share/nginx/html/SIPEvents/sipevents/views.py:298]:
requestMethod=POST

<div–<——————————————————————————

<div–<——————————————————————————

DEBUG in views [/usr/share/nginx/html/SIPEvents/sipevents/views.py:300]:
requestArgs=ImmutableMultiDict([(‘curUser’, u"<User nickname=u’\\u793c\\u8c8c’ openid=oswjmv4X0cCXcfkIwjoDfCkeTVVY avatar_static_path=img/avatar/oswjmv4X0cCXcfkIwjoDfCkeTVVY.png>")])

<div–<——————————————————————————

<div–<——————————————————————————

DEBUG in views [/usr/share/nginx/html/SIPEvents/sipevents/views.py:302]:
curUser=<User nickname=u’\u793c\u8c8c’ openid=oswjmv4X0cCXcfkIwjoDfCkeTVVY avatar_static_path=img/avatar/oswjmv4X0cCXcfkIwjoDfCkeTVVY.png>

<div–<——————————————————————————

<div–<——————————————————————————

DEBUG in views [/usr/share/nginx/html/SIPEvents/sipevents/views.py:306]:
requestForm=ImmutableMultiDict([(‘max_user_num’, u’25’), (‘end_date’, u’2016/9/27 23:30′), (‘title’, u’\u5f00\u4f1a\u5566′), (‘is_public’, u’on’), (‘start_date’, u’2016/9/25 17:30′), (‘location’, u’\u82cf\u5dde’)])

<div–<——————————————————————————

<div–<——————————————————————————

DEBUG in views [/usr/share/nginx/html/SIPEvents/sipevents/views.py:317]:
title=开会啦, start_date=2016/9/25 17:30, end_date=2016/9/27 23:30, location=苏州, max_user_num=25, is_public=on, description=, notification_time=

不过,对于特殊的两个参数,description和notification_time,没有获取对应的内容,所以还要去找:

[已解决]如何在submit表单form时获取textarea和select的内容

[已搞懂]Flask的Jinja中在url_for传递参数时候无法传递对象

[总结]

最终,通过代码:

/Users/crifan/dev/dev_root/daryun/SIPEvents/sourcecode/flask/sipevents/views.py

@app.route(‘/creat_event’, methods=[‘GET’, ‘POST’])
def creat_event():
    requestMethod = request.method
    app.logger.debug(‘requestMethod=%s’, requestMethod)
    requestArgs = request.args
    app.logger.debug(‘requestArgs=%s’, requestArgs)
    #curUser = request.args.get("curUser", None)
    #curUser = request.args.get("curUser", User(openid=""))
    #app.logger.debug(‘curUser=%s’, curUser)
    #app.logger.debug(‘type(curUser)=%s’, type(curUser))
    curUserOpenId = request.args.get("curUserOpenId", "")
    app.logger.debug(‘curUserOpenId=%s’, curUserOpenId)
    app.logger.debug(‘type(curUserOpenId)=%s’, type(curUserOpenId))
    curUser = User.query.filter_by(openid=curUserOpenId).first()
    app.logger.debug("curUser=%s", curUser)
    app.logger.debug(‘type(curUser)=%s’, type(curUser))
    if request.method == ‘POST’:
        requestForm = request.form
        app.logger.debug("requestForm=%s", requestForm)
        title               = requestForm.get("title", "")
        start_date          = requestForm.get("start_date", "")
        end_date            = requestForm.get("end_date", "")
        location            = requestForm.get("location", "")
        max_user_num        = requestForm.get("max_user_num", "")
        is_public           = requestForm.get("is_public", "")
        description         = requestForm.get("description", "")
        notification_time   = requestForm.get("notification_time", "")
        app.logger.debug("title=%s, start_date=%s, end_date=%s, location=%s, max_user_num=%s, is_public=%s, description=%s, notification_time=%s",
                         title, start_date, end_date, location, max_user_num, is_public, description, notification_time)
        # 2016/8/26 10:09
        # start_date = datetime.strptime(start_date, "%y/%m/%d %H:%M")
        return redirect(url_for(‘index’, curUser = curUser))
    else:
        return render_template("creatEvent.html", curUser = curUser)

以及:

/Users/crifan/dev/dev_root/daryun/SIPEvents/sourcecode/flask/sipevents/templates/creatEvent.html

<form action="{{ url_for("creat_event", curUserOpenId=curUser.openId) }}" method="POST">
    <div class="list-block">
        <ul>
            <li>
                <div class="item-content">
                    <div class="item-inner">
                        <div class="item-title label">标题</div>
                        <div class="item-input">
                            <input type="text" name="title" placeholder="标题" />
                        </div>
                    </div>
                </div>
            </li>
            <!–<li>
                <div class="item-content">
                    <div class="item-inner">
                        <div class="item-title label">起始日期时间</div>
                        <div class="item-input">
                            <input readonly id="datetimepicker" type="text" >
                        </div>
                    </div>
                </div>
            </li>–>
            <li>
                <div class="item-content">
                    <div class="item-inner">
                        <div class="item-title label">起始时间</div>
                        <div class="item-input">
                            <input type="text" name="start_date" placeholder="选取起始时间" readonly id="picker-date">
                        </div>
                    </div>
                </div>
                <div id="picker-date-container"></div>
            </li>
            <li>
                <div class="item-content">
                    <div class="item-inner">
                        <div class="item-title label">截止时间</div>
                        <div class="item-input">
                            <input type="text" name="end_date" placeholder="选取截止时间" readonly id="picker-date1">
                        </div>
                    </div>
                </div>
                <div id="picker-date-container1"></div>
            </li>
            <li>
                <div class="item-content">
                    <div class="item-inner">
                        <div class="item-title label">地点</div>
                        <div class="item-input">
                            <input type="text" name="location" placeholder="地点"/>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="item-content">
                    <div class="item-inner">
                        <div class="item-title label">人数上限</div>
                        <div class="item-input">
                            <!–<input type="text" name="max_user_num" placeholder="人数上限"/>–>
                            <input type="number" name="max_user_num" placeholder="人数上限"/>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="item-content">
                    <div class="item-inner">
                        <div class="item-title label">是否公开</div>
                        <div class="item-input">
                            <label class="label-switch">
                                <input type="checkbox" name="is_public" />
                                <div class="checkbox"></div>
                            </label>
                        </div>
                    </div>
                </div>
            </li>
            <li class="align-top">
                <div class="item-content">
                    <div class="item-inner">
                        <div class="item-title label">描述</div>
                        <div class="item-input">
                            <textarea name="description"></textarea>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="item-content">
                    <div class="item-inner">
                        <div class="item-title label">提醒时间</div>
                        <div class="item-input">
                            <select name="notification_time" >
                                <option>不提醒</option>
                                <option>事件发生时</option>
                                <option>5分钟前</option>
                                <option>15分钟前</option>
                                <option>30分钟前</option>
                                <option>1小时前</option>
                                <option>2小时前</option>
                                <option>1天前</option>
                                <option>2天前</option>
                                <option>1周前</option>
                            </select>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <div class="cr-mask"></div>
    </div>
    <div class="content-block">
        <div class="row">
            <div class="col-100">
                <input type="submit" value="保存"class="button button-big button-fill color-green"/>
            </div>
        </div>
    </div>
</form>

对于表单数据填写好了之后,点击保存去提交::

实现了form表单提交时,提交对应数据:

<div–<——————————————————————————
DEBUG in views [/usr/share/nginx/html/SIPEvents/sipevents/views.py:329]:
requestForm=ImmutableMultiDict([(‘description’, u’\u4e00\u8d77\u8ba8\u8bba\r\n\u65e5\u5386\u529f\u80fd’), (‘end_date’, u’2016/8/26 15:38′), (‘title’, u’\u5934\u8111\u98ce\u66b4′), (‘notification_time’, u’30\u5206\u949f\u524d’), (‘max_user_num’, u’5′), (‘is_public’, u’on’), (‘start_date’, u’2016/8/26 12:38′), (‘location’, u’\u5357\u5de5\u9662′)])

<div–<——————————————————————————

<div–<——————————————————————————

DEBUG in views [/usr/share/nginx/html/SIPEvents/sipevents/views.py:340]:
title=头脑风暴, start_date=2016/8/26 12:38, end_date=2016/8/26 15:38, location=南工院, max_user_num=5, is_public=on, description=一起讨论
日历功能, notification_time=30分钟前

【总结】

总结一下整体的思路是:

1.jinja的模板的html中用form加上action

form中加上input带name

<form action="{{ url_for("creat_event", curUserOpenId=curUser.openId) }}" method="POST">
    <input type="text" name="title" placeholder="标题" />
    <input type="checkbox" name="is_public" />
    <textarea name="description"></textarea>
    <input type="submit" value="保存"class="button button-big button-fill color-green"/>
</form>

这样用户去点击type为submit的input的button时,就可以调用对应的action的值:

此处是url_for的creat_event,加上此处传递的参数curUserOpenId

2.在Flask的路由views.py中,就可以获得:

args中的参数curUserOpenId

以及:

form中的各个输入的值

@app.route(‘/creat_event’, methods=[‘GET’, ‘POST’])
def creat_event():
    curUserOpenId = request.args.get("curUserOpenId", "")
    app.logger.debug(‘curUserOpenId=%s’, curUserOpenId)
    if request.method == ‘POST’:
        requestForm = request.form
        app.logger.debug("requestForm=%s", requestForm)
        title               = requestForm.get("title", "")
        start_date          = requestForm.get("start_date", "")
        end_date            = requestForm.get("end_date", "")
        location            = requestForm.get("location", "")
        max_user_num        = requestForm.get("max_user_num", "")
        is_public           = requestForm.get("is_public", "")
        description         = requestForm.get("description", "")
        notification_time   = requestForm.get("notification_time", "")

注:

1.如果不指定form中的method,则默认为GET

在form中的参数比较少,也不涉及到安全,(没有密码等)私密方面的数据的时候,也是可以通过GET方式获取form的参数的。

转载请注明:在路上 » [已解决]Flask中Jinja中如何提交表单数据

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
61 queries in 0.092 seconds, using 18.93MB memory