flask表單提交的兩種方式

一.通用方式

通用方式就是使用ajax或者$.post來提交。

前端html

<form method="post" action="/mockservice"  method = "post">
      ... 

    <div class="form-group">
        <label>data <font style="color:#a94442" size="2">
        <input class="form-control" id="data" name="data">
    </div>
    <div class="form-group">
        <button id="start" type="submit" class="btn btn-default">Submit &nbsp</button>
    </div>
</form>

 

將操作綁定

$(document).ready(function() {
   MockTask.start();
});

MockTask ={
    startId: "start_mock",
    start: function(){
        $('#'+this.startId).click(function (){
　　　　　　　　...var data = $('#data').val();

            var form_data = JSON.stringify({
              ..."data": data
            });
            MockSubmit.createTask(form_data);

        });
    },
};

MockSubmit = {
    createTask: function(data){
        var url = "/mockservice";
        $.post(url,data,function(result){
           if (result.code != 'SUCC'){
               alert("failed to create a new api.")
           } else {
               alert("succ");
           }
        });
    }
};

function isEmptyString(info) {
    if (info == null || info == undefined || info.length == 0){
        return true;
    }
    return false
}

這樣通過js來實現提交表單的功能，然后flask后端

@app.route("/mockservice",methods=['GET','POST'])
def MockController():
    form = MockCreate()
    if request.method == 'POST':
        code = request.form['code']
        api = request.form['api']
    return ...

通用方式的好處就是在其他框架中也適用。而且也並不復雜。

 

二.比較正宗的flask方式

前端html：

<form method="post" action="/mockservice"  method = "post">
      ... 

    <div class="form-group">
        <label>data <font style="color:#a94442" size="2">
        <input class="form-control" id="data" name="data">
    </div>
    <div class="form-group">
        <button  type="submit" class="btn btn-default">Submit &nbsp</button>
    </div>
</form>

 

前端這時候可以不用綁定操作了，但需要新建一個form對象，用這種方式的好處就是flask有很多內置的方式幫你校驗你的提交，一個字：省事！

class MockCreate(Form):
    user_email = StringField("email address",[validators.Email()])
    api = StringField("api",[Required()])
    submit = SubmitField("Submit")
    code = IntegerField("code example: 200",[Required()])
    alias = StringField("alias for api")
    data = TextAreaField("json format",[Required()])

后端這時候就要變成:

@app.route("/mockservice",methods=['GET','POST'])
def MockController():
    form = MockCreate()
    code = form['code']
    api = form['api']
    return render_template("testf.html",api=api,data=code)