Question

我有一个在搜索页面上搜索的表单：

<form action="{{ url_for('searchresults') }}" method="get" name="noname" id="theform">
    {{ form2.page(id="hiddenpage") }}
    ... some form inputs
    <button id = "mybutton" type = "submit" >Apply</button>
</form>

表单是SearchForm，其中

class SearchForm(Form):
    page = HiddenField()
    categories = SelectMultipleField(u'Text', validators=[Optional()])
    # some other stuff...

searchresults的视图处理表单：

@app.route('/searchresults', methods=['GET'])
def searchresults():
    form = SearchForm()
    # handle the form and get the search results using pagination
    page = int(request.args.getlist('page')[0])
    results = models.Product.query....paginate(page, 10, False)
    return render_template('searchresults.html', form=form, results=results, curpage=page)

results中的render_template将是我查询的前10个结果。在searchresults.html中，我会显示结果，以及其他结果的next和previous链接。此页面还包含我根据初始提交重新设置的相同搜索表单。目前，我正在使用

处理next和previous链接

<a href="#" onclick="$('#hiddenpage').val( {{ curpage+1 }} ); $('#theform').submit();"> Next </a>

因此，next链接会重新提交相同的初始表单，但page值会增加。我对这种方法并不满意，因为当我将鼠标悬停在next链接上时，我看不到我将被引导到的实际页面。它也开始感觉像是一个黑客。有更自然的方法吗？最初提交表单时，我可以使用它来创建所需参数的长字符串，并在呈现的页面中使用该字符串href=" {{ url_for('searchresults') }}?mystring"，但这似乎也不自然。我该怎么办呢？

Answer 1

您已将表单配置为以GET请求提交，因此您实际上不需要通过Javascript强制重新提交，您可以通过设置next来实现相同的结果prev链接到包含表单中所有参数的网址，并将页面修改为正确的下一页和上一页页码。

使用url_for()这很容易。您添加的与路由组件不匹配的任何参数都将添加到查询字符串中，因此您可以执行以下操作：

<a href="{{ url_for('searchresults', categories=form.categories.data, page=form.page.data+1) }}"> Next </a>

要记住的一件事是CSRF。如果您在表单中启用了该功能，那么您的下一个/上一个网址也需要有一个有效的令牌。或者您可以禁用CSRF，对于搜索表单可能没问题。

Answer 2

利用您的表单参数已经存在于URL中并使用request.args将URL参数传递到表单中这一事实：

form = SearchForm(request.args)

然后，如果您使用IntegerField小部件而不是字符串字段使page字段成为HiddenInput：

from wtforms.widgets import HiddenInput

class SearchForm(Form):
    page = HiddenField(widget=HiddenInput, default=1)

在将表单传递到搜索结果页面之前，您可以增加page：

form.page.data += 1

然后，在您的页面中，您只需创建指向下一页的链接：

<a href="{{ url_for('searchresults', **form.data) }}">Next</a>

处理表单提交分页的正确方法？

2 个答案: