利用 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格式
利用 ajax自定义Form表单的提交方式的更多相关文章
- form表单的提交方式
开发中表单提交是很常见的,表单的提交方式也多种方式. 1.使用submit按钮提交表单 <input type="submit"/> <!DOCTYPE htm ...
- jQuery Ajax 确定 form 表单 submit 提交成功
使用 jQuery 提交表单,可以使用 同步方式(async: false). a.html 是 html 文件,a.php 是服务端文件,把 a.html 中表单的数据提交到 a.php 中,在提交 ...
- form表单以get方式提交时action中?后面的参数部分不生效
form表单的提交方式是get方式,action="?sss=test",问号后面参数是接受不到的,谨记!
- 使用ajax方法实现form表单的提交(附源码)
写在前面的话 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说 ...
- 使用ajax方法实现form表单的提交
作者:13 GitHub:https://github.com/ZHENFENG13 版权声明:本文为原创文章,未经允许不得转载. 写在前面的话 在使用form表单的时候,一旦点击提交触发submit ...
- AJAX 实现form表单提交
1.使用Ajax实现异步操作,点击登录按钮后,即触发form表单的提交事件,数据传输至后端 JSP: <script type="text/javascript" src=& ...
- JavaWeb学习总结(十一):Session解决form表单重复提交
在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没有响应,那么用户可能会以为是自己没有提交表单,就会再点击提交按钮重复提交表单,我们在开发中必须防止表单重复提交. 一.表单重复提 ...
- 基于form表单submit提交不跳转
方法一:target <html> <body> <form action="" method="post" target=&qu ...
- JavaScript 创建一个 form 表单并提交
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
随机推荐
- SkylineGlobe系列软件对机器配置要求
6.6版本: TerraExplorer for Desktop / Web Operating System: Windows® 7/ 8/ 10 - 64 bit recommended Proc ...
- 异步操作之 Promise 和 Async await 用法进阶
ES6 提供的 Promise 方法和 ES7 提供的 Async/Await 语法糖都可以更好解决多层回调问题, 详细用法可参考:https://www.cnblogs.com/cckui/p/99 ...
- .NET Core 中的路径问题
NET Core 应用程序相对于以前的.NET Framework 应用程序在启动运行的方式上有一定的差异,今天就来谈一谈这个获取应用程序启动路径的问题. 1.工作路径 WorkingDirector ...
- SpringBoot开发案例之整合Dubbo分布式服务
前言 在 SpringBoot 很火热的时候,阿里巴巴的分布式框架 Dubbo 不知是处于什么考虑,在停更N年之后终于进行维护了.在之前的微服务中,使用的是当当维护的版本 Dubbox,整合方式也是使 ...
- python-入门的第一个爬虫例子
前言: 此文为大家入门爬虫来做一次简单的例子,让大家更直观的来了解爬虫. 本次我们利用 Requests 和正则表达式来抓取豆瓣电影的相关内容. 一.本次目标: 我们要提取出豆瓣电影-正在上映电影名称 ...
- Python学习第九篇——while和for的区别
pets = ['dog','cat','dog','goldfish','cat','rabbit','cat'] print(pets) for pet in pets: print(pet) # ...
- PS滤镜给城市夜空照片添加满天星
原图 一.新建空白图层. 二.填充黑色(编辑→填充). 三.转换为智能对象. 四.添加杂色(滤镜→杂色→添加杂色). 五.使用高斯模糊(滤镜→模糊→高斯模糊). 六.如果你想再次修改模糊效果,可双击该 ...
- ajax相关问题
1.contentType和dataType contentType 主要设置你发送给服务器的数据格式 dataType设置你收到服务器数据的格式(如text,json等),最常用的为json. 2. ...
- 【kindle笔记】之 《黑客微百科》-2018-6-17
前段时间复习六级的时候,从图书馆看到一本书,然后带回来了.今天开始读.今天是2018年6月17日. 严格来讲,一本不算kindle笔记的笔记,不过广义的啃豆笔记了解一下.哈哈. 首页说到的黑客理念是: ...
- Linux 典型应用之Mysql
Mysql 的安装及连接 删除默认安装的 mariadb数据库 yum remove mariadb-libs.x86_64 mysql源下载的网址 https://dev.mysql.com/dow ...