1. 程式人生 > >利用 ajax自定義Form表單的提交方式

利用 ajax自定義Form表單的提交方式

需求場景:有時候單純的form表單無法向後端傳遞額外的引數 比如需要action傳遞js非同步生成的引數 ,form表單預設的action就無法滿足需求,這時就需要我們自定義form表單的提交方式。

html:(向後臺傳遞對任務的評論內容,預設缺點:不能攜帶任務id)

 1 <div>
 2             <form action="#" id="form_comment">
 3                 <textarea id="comment" required="required" class="form-control"
name="comment" 4 data-parsley-trigger="keyup" data-parsley-minlength="20" data-parsley-maxlength="100" 5 data-parsley-validation-threshold="10" placeholder="評論......"></textarea> 6 <div style="padding: 4px 0 0 0"> 7 <
button type="submit" class="btn btn-success" id='commentSb' 8 style="background: #fff;color: #0c0c0c;border-color: #CCC"><font 9 style="vertical-align: inherit;"><font style="vertical-align: inherit;">提交</font></font> 10
</button> 11 <button type="button" class="btn btn-primary" id='commentCel'><font 12 style="vertical-align: inherit;float: right"><font 13 style="vertical-align: inherit;">取消</font></font></button> 14 </div> 15 </form> 16 </div>
View Code

js:(自定義提交方法)

 1 $(document).ready(function(){
 2     function decodeQuery() {
 3             var search = window.location.href;    //獲取跳轉到本頁面的路由  http://127.0.0.1:5000/task_mgm/taskinfo_editID=29?pageType=minePage
 4             return search.split('=')[1].split('?')[0];
 5         }
 6         // 獲取任務id
 7      var taskId = decodeQuery();
 8     // 提交評論
 9      $("#form_comment").submit(function (event) {
10             event.preventDefault();  // 阻止form表單的預設提交路徑:action指定的路徑
11             var comment = $('#comment').val();
12             var data = {
13                 "comment": comment
14             };
15             $.ajax({
16                 url: "/task_mgm/taskinfo_comment=" + taskId,   // 可靈活傳參
17                 type: "POST",
18                 data: JSON.stringify(data),
19                 contentType: "application/json",
20                 dataType: "json",
21                 success: function (resp) {
22                     if (resp.error == 'OK') {
23                         alert('評論成功');
24                         $('#comment').val('');
25                     } else {
26                         alert('評論失敗');
27                     }
28                 }
29             })
30         })    
31 })

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格式