使在TurboGears2中创建AJAX表单更加容易
项目描述
关于Ajax表单
tgext.ajaxforms使得在TurboGears2应用中快速轻松地创建AJAX加载和提交的表单变得容易。
要使表单基于AJAX，只需将ajaxforms.ajaxloaded装饰器应用到任何ToscaWidgets表单上，并声明一个ajaxurl变量来指定加载表单的方法。该方法可以是自动生成的或手写的。默认情况下，自动支持AJAX验证。
安装
tgext.ajaxform可以从PyPI或从Bitbucket安装
easy_install tgext.ajaxforms
应该对大多数用户来说都可以正常工作
创建AJAX表单
表单本身可以是任何ToscaWidgets表单，唯一需要添加的是将@ajaxloaded装饰器应用到表单本身上，并指定指向相关控制器方法的表单的ajaxurl。
from tgext.ajaxforms import ajaxloaded
@ajaxloaded
class TestForm(twf.TableForm):
class fields(WidgetsList):
name = twf.TextField('Name', validator=validators.String(not_empty=True))
surname = twf.TextField('Surname', validator=validators.String(not_empty=True))
ajaxurl = '/form_show'
action = '/form_submit'
submit_text = "GO"
test_form = TestForm()
显示表单
要显示表单，需要在绑定到表单的ajaxurl参数的控制器方法中添加一个方法，该方法将显示表单本身，并在每次ajaxform需要显示表单时使用。对于大多数情况，可以使用ajaxform调用生成该方法。同时，您还需要创建一个页面，表单将在其中加载。
例如，要在首页中显示表单，且ajaxurl = '/form_show'
from tgext.ajaxforms import ajaxform
class RootController(BaseController):
form_show = ajaxform(test_form)
@expose('myapp.templates.index')
def index(self):
return dict(form=test_form)
myapp.templates.index模板应看起来像您通常用于显示基于ToscaWidgets的表单的模板
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:py="http://genshi.edgewall.org/"
xmlns:xi="http://www.w3.org/2001/XInclude">
<xi:include href="master.html" />
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type" py:replace="''"/>
<title>Ajax Form Test Example</title>
</head>
<body>
<div id="myform">
${form(name='HI')}
</div>
</body>
</html>
处理提交和验证
提交和验证应该与您用于任何ToscaWidgets表单的方式相同，只需使用绑定到ajaurl的方法作为错误处理器即可
class RootController(BaseController):
@expose()
@validate(test_form, error_handler=form_show)
def form_submit(self, **kw):
return 'Thanks: {name} {surname}'.format(**kw)
完整示例
myapp.templates.index
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:py="http://genshi.edgewall.org/"
xmlns:xi="http://www.w3.org/2001/XInclude">
<xi:include href="master.html" />
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type" py:replace="''"/>
<title>Ajax Form Test Example</title>
</head>
<body>
<div id="myform">
${form(name='HI')}
</div>
</body>
</html>
myapp.controllers.root
from tgext.ajaxforms import ajaxloaded, ajaxform
@ajaxloaded
class TestForm(twf.TableForm):
class fields(WidgetsList):
name = twf.TextField('Name', validator=validators.String(not_empty=True))
surname = twf.TextField('Surname', validator=validators.String(not_empty=True))
ajaxurl = '/form_show'
action = '/form_submit'
submit_text = "GO"
test_form = TestForm()
class RootController(BaseController):
form_show = ajaxform(test_form)
@expose('myapp.templates.index')
def index(self):
return dict(form=test_form)
@expose()
@validate(test_form, error_handler=form_show)
def form_submit(self, **kw):
return 'Thanks: {name} {surname}'.format(**kw)
按需显示表单
AjaxForm自0.1.2版本开始支持按需显示表单。这允许在JavaScript事件发生时显示表单。
要实现这一功能，您必须在模板内部显示表单时使用 form.on_demand() 而不是 form()。这将创建一个名为 FormClassName_on_demand(where, params) 的javascript函数，其中 where 参数是任何有效的选择器，用于显示表单，而 params 方法是一个字典，包含了需要发送到后端的参数。默认情况下，params 字典中指定的任何参数都将用于填充表单字段。
例如，要按需显示此表单
@ajaxloaded
class TryAjax(TableForm):
class fields(WidgetsList):
field1 = TextField(validator=validators.String(not_empty=True))
field2 = TextField(validator=validators.String(not_empty=True))
action = '/dosomething'
ajaxurl = '/TryAjax_show'
ajax_test = TryAjax()
您的模板可能看起来像这样
<div id="myform_box">
${form.on_demand()}
<div onclick="TryAjax_on_demand('#myform_box', {'field2':'random text'})">Show Form</div>
</div>
tgext.ajaxforms-0.3.2.tar.gz 的哈希值
| 算法 | 哈希摘要 | |
|---|---|---|
| SHA256 | 20aeb38d186e25396f83f5468bf06a2d4508321d3834b80a7d48833bafd9d75b |
|
| MD5 | 01e1c0240dcce110833c7e94e31bfd3f |
|
| BLAKE2b-256 | 6135b4e95f3c08156b98d12d42b8dac919b2c3fc0645c47e29386764050b967d |