处理表单提交分页的正确方法? [英] Correct way to handle pagination with form submission?

问题描述

我有一个用于在搜索页面上进行搜索的表格:

I have a form for doing a search on a search page:

<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 的视图处理以下形式:

The view for searchresults handles the form:

@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)

render_template 中的结果将是我查询的前10个结果.我在 searchresults.html 中显示结果，以及其他结果的 next 和 previous 链接.该页面还包含与初次提交时相同的搜索表单.目前，我正在使用

下一个 next 和 previous 链接

The results in render_template will be the first 10 results of my query. In searchresults.html I display the results, along with a next and previous link for the other results. This page also contains the same search form which I re-instate as per the initial submission. Currently I'm handling the next and previous links using

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

因此 next 链接重新提交了相同的初始格式，但是 page 值增加了.我对这种方法不是很满意，因为当我将鼠标悬停在 next 链接上时，我看不到要定向到的实际页面.它也开始感觉有点像黑客了.有没有更自然的方法可以做到这一点?最初提交表单时，我可以使用它创建所需参数的长字符串，并在呈现的页面中使用该字符串作为 href ="{{url_for('searchresults')}}?mystring" ，但这似乎也不自然.我该如何处理?

So the next link re-submits the same initial form, but with the page value increased. I'm not really happy with this approach because when I hover over the next link I don't see the actual page I will be directed to. It also is starting to feel like a bit of a hack. Is there a more natural way to do this? When the form is initially submitted I could use it to create a long string of the desired parameters and use that string in the rendered page as href=" {{ url_for('searchresults') }}?mystring", but this also seems unnatural. How should I handle this?

推荐答案

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

You have your form configured to submit as a GET request, so you don't really need to force a re-submission through Javascript, you can achieve the same result by setting the next and prev links to URLs that include all the parameters in your form with the page modified to the correct next and previous page numbers.

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

This is really easy to do with url_for(). Any argument you add that do not match route components will be added to the query string, so you can do something like this:

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

要记住的一件事是CSRF.如果您在表单中启用了该功能，则您的下一个/上一个URL也将需要具有有效的令牌.或者，您可以禁用CSRF，这对于搜索表单可能是可以的.

One thing to keep in mind is CSRF. If you have it enabled in your form, then your next/prev URLs will also need to have a valid token. Or you can disable CSRF, which for a search form might be okay.

这篇关于处理表单提交分页的正确方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！