利用 ajax自定义Form表单的提交方式

需求场景：有时候单纯的form表单无法向后端传递额外的参数 比如需要action传递js异步生成的参数 ，form表单默认的action就无法满足需求，这时就需要我们自定义form表单的提交方式。

html:(向后台传递对任务的评论内容，默认缺点：不能携带任务id)

<div>
            <form action="#" id="form_comment">
                <textarea id="comment" required="required" class="form-control" name="comment"
                          data-parsley-trigger="keyup" data-parsley-minlength="20" data-parsley-maxlength="100"
                          data-parsley-validation-threshold="10" placeholder="评论......"></textarea>
                <div style="padding: 4px 0 0 0">
                    <button type="submit" class="btn btn-success" id='commentSb'
                            style="background: #fff;color: #0c0c0c;border-color: #CCC"><font
                            style="vertical-align: inherit;"><font style="vertical-align: inherit;">提交</font></font>
                    </button>
                    <button type="button" class="btn btn-primary" id='commentCel'><font
                            style="vertical-align: inherit;float: right"><font
                            style="vertical-align: inherit;">取消</font></font></button>
                </div>
            </form>
        </div>

js:(自定义提交方法)

$(document).ready(function(){
    function decodeQuery() {
            var search = window.location.href;    //获取跳转到本页面的路由  http://127.0.0.1:5000/task_mgm/taskinfo_editID=29？pageType=minePage
            return search.split('=')[1].split('?')[0];
        }
        // 获取任务id
     var taskId = decodeQuery();
    // 提交评论
     $("#form_comment").submit(function (event) {
            event.preventDefault();  // 阻止form表单的默认提交路径：action指定的路径
            var comment = $('#comment').val();
            var data = {
                "comment": comment
            };
            $.ajax({
                url: "/task_mgm/taskinfo_comment=" + taskId,   // 可灵活传参
                type: "POST",
                data: JSON.stringify(data),
                contentType: "application/json",
                dataType: "json",
                success: function (resp) {
                    if (resp.error == 'OK') {
                        alert('评论成功');
                        $('#comment').val('');
                    } else {
                        alert('评论失败');
                    }
                }
            })
        })    
})

flask:

# 提交评论
@task_mgm.route('/taskinfo_comment=<int:num>', methods=['GET', 'POST'])
@sso_wrapper
def taskinfo_comment_form_fun(num):
    req_data = request.get_json()   # 获取json数据参数
    comment = req_data.get('comment')
    comment = Comment(content=comment, taskId=num, userId=2)
    db.session.add(comment)
    db.session.commit()
    return jsonify(error='OK'， emag='NO')  # 返回数据json格式