Question

我正在使用RESTful http方法在flask中构建应用程序。我有一个页面，上面有两个表单，一个允许用户创建一个对象（一个表单一个按钮），另一个表单列出现有对象，允许用户删除和修改它们（一个表单，两个按钮）。 / p>

我已经设置了一个AJAX系统来处理这些表单。根据操作（创建，更新，删除），我使用不同的标头（POST，PUT，DELETE）向服务器发送请求。在烧瓶方面，我有一个MethodView，其中有适当的方法来处理这些请求。

我的问题是没有启用javascript的用户。默认情况下，表单有一个POST操作 - 然而，我的MethodView被写入处理POST作为创建新对象，因此它无法处理输入整个形式。另外，我的两个表单都有POST作为默认操作，因此现在它们都会被同一个不区分它们的函数处理。

如何在我的视图中同时支持AJAX和常规表单提交？

这是我的更新/删除表单：

<form method="POST" role="form" id="process-form">
    <table>
            <tr>
                <td>
                    <input id="process-selection-0" name="process-selection" type="checkbox" value="1">
                </td>
                <td>
                    <label for="process-selection-0">
                            <a href="/projects/1">
                            aaa
                        </a>
                    </label>
                </td>
            </tr>
    </table>
    <h3>Selected file actions:</h3>
    <button class="btn btn-primary" id="process-process_button" name="action" type="submit" value="0"><span class="glyphicon glyphicon-tasks "></span> Process</button>
    <button class="btn btn-danger" id="process-delete_button" name="action" type="submit" value="-1"><span class="glyphicon glyphicon-remove "></span> Delete</button>
</form>

这是我的更新/删除AJAX javascript：

$('form#process-form > #process-process_button').click(function (event) {

    var formData = $( '#process-form' ).serialize()
    console.log("Sending data:")
    console.log(formData)
    // process the form
    $.ajax({
        type         : 'PUT', 
        url          : '/projects/',
        data         : formData,
        dataType     : 'json',
    })
        .done(function (data) {
            console.log(data); 
        });
    event.preventDefault();
});

$('form#process-form > #process-delete_button').click(function (event) {

    var formData = $( '#process-form' ).serialize()
    console.log("Sending data:")
    console.log(formData)
    $.ajax({
        type         : 'DELETE',
        url         : '/projects/',
        data         : formData,
        dataType     : 'json',
    })
        .done(function (data) {
            console.log(data); 
        });
    event.preventDefault();
});

烧瓶中AJAX的优雅降解

0 个答案: