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

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:

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

利用 ajax自定义Form表单的提交方式的更多相关文章

  1. form表单的提交方式

    开发中表单提交是很常见的,表单的提交方式也多种方式. 1.使用submit按钮提交表单  <input type="submit"/> <!DOCTYPE htm ...

  2. jQuery Ajax 确定 form 表单 submit 提交成功

    使用 jQuery 提交表单,可以使用 同步方式(async: false). a.html 是 html 文件,a.php 是服务端文件,把 a.html 中表单的数据提交到 a.php 中,在提交 ...

  3. form表单以get方式提交时action中?后面的参数部分不生效

    form表单的提交方式是get方式,action="?sss=test",问号后面参数是接受不到的,谨记!

  4. 使用ajax方法实现form表单的提交(附源码)

    写在前面的话 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说 ...

  5. 使用ajax方法实现form表单的提交

    作者:13 GitHub:https://github.com/ZHENFENG13 版权声明:本文为原创文章,未经允许不得转载. 写在前面的话 在使用form表单的时候,一旦点击提交触发submit ...

  6. AJAX 实现form表单提交

    1.使用Ajax实现异步操作,点击登录按钮后,即触发form表单的提交事件,数据传输至后端 JSP: <script type="text/javascript" src=& ...

  7. JavaWeb学习总结(十一):Session解决form表单重复提交

    在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没有响应,那么用户可能会以为是自己没有提交表单,就会再点击提交按钮重复提交表单,我们在开发中必须防止表单重复提交. 一.表单重复提 ...

  8. 基于form表单submit提交不跳转

    方法一:target <html> <body> <form action="" method="post" target=&qu ...

  9. JavaScript 创建一个 form 表单并提交

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

随机推荐

  1. SkylineGlobe系列软件对机器配置要求

    6.6版本: TerraExplorer for Desktop / Web Operating System: Windows® 7/ 8/ 10 - 64 bit recommended Proc ...

  2. 异步操作之 Promise 和 Async await 用法进阶

    ES6 提供的 Promise 方法和 ES7 提供的 Async/Await 语法糖都可以更好解决多层回调问题, 详细用法可参考:https://www.cnblogs.com/cckui/p/99 ...

  3. .NET Core 中的路径问题

    NET Core 应用程序相对于以前的.NET Framework 应用程序在启动运行的方式上有一定的差异,今天就来谈一谈这个获取应用程序启动路径的问题. 1.工作路径 WorkingDirector ...

  4. SpringBoot开发案例之整合Dubbo分布式服务

    前言 在 SpringBoot 很火热的时候,阿里巴巴的分布式框架 Dubbo 不知是处于什么考虑,在停更N年之后终于进行维护了.在之前的微服务中,使用的是当当维护的版本 Dubbox,整合方式也是使 ...

  5. python-入门的第一个爬虫例子

    前言: 此文为大家入门爬虫来做一次简单的例子,让大家更直观的来了解爬虫. 本次我们利用 Requests 和正则表达式来抓取豆瓣电影的相关内容. 一.本次目标: 我们要提取出豆瓣电影-正在上映电影名称 ...

  6. Python学习第九篇——while和for的区别

    pets = ['dog','cat','dog','goldfish','cat','rabbit','cat'] print(pets) for pet in pets: print(pet) # ...

  7. PS滤镜给城市夜空照片添加满天星

    原图 一.新建空白图层. 二.填充黑色(编辑→填充). 三.转换为智能对象. 四.添加杂色(滤镜→杂色→添加杂色). 五.使用高斯模糊(滤镜→模糊→高斯模糊). 六.如果你想再次修改模糊效果,可双击该 ...

  8. ajax相关问题

    1.contentType和dataType contentType 主要设置你发送给服务器的数据格式 dataType设置你收到服务器数据的格式(如text,json等),最常用的为json. 2. ...

  9. 【kindle笔记】之 《黑客微百科》-2018-6-17

    前段时间复习六级的时候,从图书馆看到一本书,然后带回来了.今天开始读.今天是2018年6月17日. 严格来讲,一本不算kindle笔记的笔记,不过广义的啃豆笔记了解一下.哈哈. 首页说到的黑客理念是: ...

  10. Linux 典型应用之Mysql

    Mysql 的安装及连接 删除默认安装的 mariadb数据库 yum remove mariadb-libs.x86_64 mysql源下载的网址 https://dev.mysql.com/dow ...