码迷,mamicode.com
首页 > Web开发 > 详细

利用 ajax自定义Form表单的请求方式

时间:2018-12-28 14:05:25      阅读:363      评论:0      收藏:0      [点我收藏+]

标签:div   methods   wrap   fun   data-   跳转   var   ESS   edit   

需求场景:有时候单纯的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
 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格式

 

利用 ajax自定义Form表单的请求方式

标签:div   methods   wrap   fun   data-   跳转   var   ESS   edit   

原文地址:https://www.cnblogs.com/We612/p/10190123.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!