flask html 按钮,python,flask_如何解决 Flask 中使用 WTForm 时自定 Button 却在页面总被 Div 包裹住的问题,python,flask,wtforms,h...

如何解决 Flask 中使用 WTForm 时自定 Button 却在页面总被 Div 包裹住的问题

wtform中,我想定制一个button。

参考官方文档编写了ButtonFiled()和ButtonWidget(object)以及ButtonInput(Input).

为什么我用了与库中一摸一样的代码,只是改了个函数名字,在页面生成的却总会被包裹在一个 DIV中?且会被加上一个Label。

效果如图:

我的代码如下:

# !/usr/bin/env python

# coding: utf-8

'''

'''

from werkzeug.utils import escape

from wtforms import BooleanField,Field

from wtforms.widgets import HTMLString, html_params, Input, SubmitInput

from wtforms.compat import text_type

__author__ = 'Jux.Liu'

class ButtonWidget(object):

'''

用于显示按钮(button)的部件(widget)

'''

def __call__(self, field, **kwargs):

kwargs.setdefault('name', field.name)

kwargs.setdefault('value', field.value)

kwargs.setdefault('type', "submit")

return HTMLString('%s' % (

html_params(**kwargs),

escape(field._value())

))

class ButtonInput(Input):

"""

Renders a submit button.

The field's label is used as the text of the submit button instead of the

data on the field.

"""

input_type = 'submit'

def __call__(self, field, **kwargs):

kwargs.setdefault('value', field.label.text)

return super(ButtonInput, self).__call__(field, **kwargs)

class ButtonOneField(BooleanField):

'''

定义可以将按钮(button)用于 Flask 表单(form)的域(field)

'''

widget = SubmitInput()

class ButtonTwoField(Field):

'''

定义可以将按钮(button)用于 Flask 表单(form)的域(field)

'''

widget = ButtonWidget()

def __init__(self, text, name, value, **kwargs):

super(ButtonTwoField, self).__init__(**kwargs)

self.text = text

self.value = value

self.name = name

def _value(self):

return str(self.text)

官方库代码截取如下:

class SubmitField(BooleanField):

"""

Represents an ````. This allows checking if a given

submit button has been pressed.

"""

widget = widgets.SubmitInput()

class BooleanField(Field):

"""

Represents an ````.

:param false_values:

If provided, a sequence of strings each of which is an exact match

string of what is considered a "false" value. Defaults to the tuple

``('false', '')``

"""

widget = widgets.CheckboxInput()

false_values = ('false', '')

def __init__(self, label=None, validators=None, false_values=None, **kwargs):

super(BooleanField, self).__init__(label, validators, **kwargs)

if false_values is not None:

self.false_values = false_values

def _value(self):

if self.raw_data:

return text_type(self.raw_data[0])

else:

return 'y'

class SubmitInput(Input):

"""

Renders a submit button.

The field's label is used as the text of the submit button instead of the

data on the field.

"""

input_type = 'submit'

def __call__(self, field, **kwargs):

kwargs.setdefault('value', field.label.text)

return super(SubmitInput, self).__call__(field, **kwargs)

update:

出现这个问题的情况是使用 wtf.quick_form()时出现的,如果直接调用 form.button,那么生成的按钮是正常的。

update:

经测试,在ButtonTwoField(Field)的构造函数中,增加对于label的设定,可以将label改为空,但是依旧会被div包裹住.

import wtforms import Label

class ButtonTwoField(Field):

'''

定义可以将按钮(button)用于 Flask 表单(form)的域(field)

'''

widget = ButtonWidget()

def __init__(self, text, name, value, **kwargs):

super(ButtonTwoField, self).__init__(**kwargs)

self.label=Label(field_id=999, text='' )

self.text = text

self.value = value

self.name = name

def _value(self):

return str(self.text)

相关阅读:

echarts3中linestyle的宽度问题

linux不重启系统的情况下修改root密码

如何防止cookie伪造?

怎么用js读取Excel或者txt数据

钩子文件中token值在哪里找?

sublime 的 bulid 键不能使用

numpy中的fromfunction()的调用栈很奇葩!?!?

javascript setter 和 getter到底是做什么的

thymeleaf为什么动态加载的文件没有成功,是需要sever吗

nginx $_SERVER['PHP_SELF'] 得到重复路径是什么原因?

求解决find input author error!

有了gulp和webpack,还需要bower吗?

android 区域交叉计算的问题

Android Studio切换分支后的bug?

关于php的array_uintersect_uassoc设置返回值输出不是预料中的!

c++ 析构函数 delete

Python中子类和父类是不是不能有同名成员变量?

在javascript里怎样方便的克隆一个object

js里的正则匹配能有类似php里的PREG_OFFSET_CAPTURE功能吗

typeof返回结果整理

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我可以为你提供一个简单的实现思路。 首先,我们需要在数据库存储每个文章/帖子的点赞数量,可以在文章表添加一个字段来存储这个数据。假设我们的文章表名为 `articles`,点赞数量字段名为 `likes`。 在前端页面,我们需要为每篇文章/帖子添加一个点赞按钮,点击按钮后通过 AJAX 请求向后端发送点赞请求。我们可以在路由添加一个处理点赞请求的函数,示例代码如下: ```python from flask import Flask, request, jsonify from flask_mysqldb import MySQL app = Flask(__name__) app.config['MYSQL_HOST'] = 'localhost' app.config['MYSQL_USER'] = 'root' app.config['MYSQL_PASSWORD'] = 'password' app.config['MYSQL_DB'] = 'database_name' mysql = MySQL(app) @app.route('/like', methods=['POST']) def like(): article_id = request.form['article_id'] cur = mysql.connection.cursor() cur.execute("UPDATE articles SET likes = likes + 1 WHERE id = %s", (article_id,)) mysql.connection.commit() cur.close() return jsonify({'status': 'success'}) ``` 这个路由接收一个 POST 请求,其包含一个名为 `article_id` 的表单字段,表示用户点赞的文章/帖子 ID。在处理请求时,我们使用 MySQLDB 库执行一个 SQL 更新语句,将对应文章/帖子的点赞数量加一。最后返回一个 JSON 格式的响应,表示操作成功。 在前端页面,我们可以通过 jQuery 等库来发送 AJAX 请求,并在请求成功后更新点赞数量的显示。示例代码如下: ```html <!-- 假设文章 ID 为 1 --> <div class="article"> <h2>这是一篇文章</h2> <p>文章内容</p> <span class="likes">0</span> 个人赞了这篇文章 <button class="like-button" data-article-id="1">点赞</button> </div> <script> $(function() { $('.like-button').click(function() { $.post('/like', {'article_id': $(this).data('article-id')}, function(data) { if (data.status == 'success') { var likes = parseInt($('.likes').text()); $('.likes').text(likes + 1); } else { alert('点赞失败'); } }); }); }); </script> ``` 这段代码,我们为点赞按钮添加了一个自定义属性 `data-article-id`,表示该按钮对应的文章/帖子 ID。当用户点击按钮时,我们通过 jQuery 的 `$.post` 方法向 `/like` 路由发送一个包含 `article_id` 字段的 POST 请求。在请求成功后,我们解析响应的 `status` 字段,如果值为 `success`,则说明点赞成功,此时我们更新点赞数量的显示。否则,说明点赞失败,我们弹出一个提示框告知用户。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值