如何将表单“提交”到 ajax 脚本而不是返回到 Flask？

Question

目标： 模拟 this example (longtask with bar) 有一个区别：我需要从提交的表单中传递一个值列表。

这是我的 form.py：

class InstallForm(Form):
  servers = SelectField(u'Server Names', validators = [required()])
  prop_files = SelectField(u'Properties Files', validators = [required()])
  mod_files = SelectField(u'Mod Files', validators = [required()])
  build = SelectField(u'Build Type', validators = [required()])
  do_install = SelectField(u'Do Install?', validators = [required()])
  submit = SubmitField('Submit')

路线如下：

用户最初来到 /installer

@servers.route('/installer', methods=['GET', 'POST'])
def installer():

    servers = UcxServer.query.order_by(UcxServer.name)
    file_options = Install(app.config['LOADER_LOCATION']).get_options()

    form = InstallForm()
    form.servers.choices = [(s.ip_address, s.name) for s in servers]
    form.prop_files.choices = [(f,f) for f in file_options['props']]
    form.mod_files.choices = [(f,f) for f in file_options['mods']]
    form.build.choices = [("'ci'",'ci'), ("'nightly'",'nightly')]
    form.do_install.choices = [('TRUE','TRUE'), ('FALSE','FALSE')]


    if form.validate_on_submit():
      install_list = [form.prop_files.data, form.mod_files.data,      
                      form.build.data, form.servers.data, form.do_install.data]

    return render_template('installer.html') <- what to do here?

return render_template('installer.html', form=form)

我正在使用wtf.quick_form() 来呈现此表单。

这是我完全迷失的模板：

{{ wtf.quick_form(form) }}

<div id="progress"></div>

<script src="//cdnjs.cloudflare.com/ajax/libs/nanobar/0.2.1/nanobar.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
    function start_long_task() {
        // add task status elements
        div = $('<div class="progress"><div></div><div>0%</div><div>...</div><div>&nbsp;</div></div><hr>');
        $('#progress').append(div);

        // create a progress bar
        var nanobar = new Nanobar({
            bg: '#44f',
            target: div[0].childNodes[0]
        });

        // send ajax POST request to start background job
        $.ajax({
            type: 'POST',
            url: '/longtask',
            data: $('form').serialize()
            success: function(data, status, request) {
                status_url = request.getResponseHeader('Location');
                update_progress(status_url, nanobar, div[0]);
            },
            error: function() {
                alert('Unexpected errorS');
            }
        });
    }
    function update_progress(status_url, nanobar, status_div) {
        // send GET request to status URL
        $.getJSON(status_url, function(data) {
            // update UI
            percent = parseInt(data['current'] * 100 / data['total']);
            nanobar.go(percent);
            $(status_div.childNodes[1]).text(percent + '%');
            $(status_div.childNodes[2]).text(data['status']);
            if (data['state'] != 'PENDING' && data['state'] != 'PROGRESS') {
                if ('result' in data) {
                    // show result
                    $(status_div.childNodes[3]).text('Result: ' + data['result']);
                }
                else {
                    // something unexpected happened
                    $(status_div.childNodes[3]).text('Result: ' + data['state']);
                }
            }
            else {
                // rerun in 2 seconds
                setTimeout(function() {
                    update_progress(status_url, nanobar, status_div);
                }, 2000);
            }
        });
    }
    $(function() {
        $('#button').click(start_long_task);
    });

我的路由中还有一个 celery 任务，以及一个重定向路由，它有一个带有 task.id 的 Location 标头，以便我可以获取状态更新。

编辑1：

更具体：

点击提交时，表单中选择的数据应该去：

$.ajax({
        type: 'POST',
        url: '/longtask',
        data: $('form').serialize()

而不是

if form.validate_on_submit():
    install_list = [form.prop_files.data, form.mod_files.data,    form.build.data, form.servers.data, form.do_install.data]
    flash(install_list)
    return render_template('installer.html', form=form)

Answer 1

解决了我遇到的问题。以下是对同一条船上的其他人的一些亮点。

• 放弃 wtf.quick_form 新表单如下所示：

   <form action="" id='ucx'>
   {{ form.hidden_tag() }}
   <dl>
   {{ render_field(form.servers) }}
   {{ render_field(form.prop_files) }}
   {{ render_field(form.mod_files) }}
   {{ render_field(form.build) }}
   {{ render_field(form.do_install) }}
   </dl>
   <p><input type="button" value="Install!" onclick="start_long_task()">
   </form>
  

我没有使用提交，而是使用链接到长任务功能的按钮。 在函数内部，我得到如下形式的值：

        myArray =  [];
        myArray.push(document.getElementById('prop_files').value);
        myArray.push(document.getElementById('mod_files').value);
        myArray.push(document.getElementById('build').value);
        myArray.push(document.getElementById('servers').value);
        myArray.push(document.getElementById('do_install').value);

然后我使用 AJAX 将其传递回 Web 服务器，如下所示：

    .ajax({
            type: 'POST',
            url: '/longtask',
            data: JSON.stringify(myArray),
            contentType: "application/json; charset=utf-8",
            dataType: "json",

希望这对其他人有所帮助。 顺便说一句，如果我的工作方式有什么完全愚蠢的地方，我会很想学习。

谢谢！

Answer 2

尽管您已为单击#button 元素的用户添加了监听器，但除非您使用jquery.submit() 为该特定操作添加处理程序，否则表单仍将提交：

$(function() {
    $('form').submit(function(event) {
        event.preventDefault();
        start_long_task();
    });
});