jquery实现动态创建form并提交的方法示例


Posted in jQuery onMay 27, 2019

本文实例讲述了jquery实现动态创建form并提交的方法。分享给大家供大家参考,具体如下:

有时候在写web 应用的时候,需要临时动态构造一个form 并提交,form 里面的参数以及action,以及是post请求还是get请求,甚至form 的样式都是可以指定的,用原生的javascript  肯定可以做到,我用jquery做了一个测试。

我自己测试的是构造一个分页的post请求, 为了防止csrf 攻击,加入了csrf 验证,不需要的可以去掉.

function genSearchObj(url,page,pageSize,keyword){
  var params = {};
  params.url = url;
  params.page = page;
  params.pageSize = pageSize;
  params.cond = keyword;
  return params;
}
function mockFormSubmit(params){
  var form = $('<form />', {action : params.url, method:"post", style:"display:none;"}).appendTo('body');
  $.each(params, function(k, v) {
     if ( k != "url" ){
       form.append('<input type="hidden" name="' + k +'" value="' + v +'" />');
     }
  });
  form.append('<input type="hidden" name="csrfToken" value="' + $("#csrf_token").val() + '" />' );
  form.submit();
}

这样就动态构造了一个form ,并提交。

附:js动态创建Form表单并提交的方法

var dlform = document.createElement('form');
dlform.style = "display:none;";
dlform.method = 'post';
dlform.action = '../fileServlet';
dlform.target = 'callBackTarget';
var hdnFilePath = document.createElement('input');
hdnFilePath.type = 'hidden';
hdnFilePath.name = 'filePath';
hdnFilePath.value = filePath;
dlform.appendChild(hdnFilePath);
document.body.appendChild(dlform);
dlform.submit();
document.body.removeChild(dlform);

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
jQuery each和js forEach用法比较
Feb 27 jQuery
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
jQuery实时统计输入框字数及限制
Jun 24 jQuery
jQuery实现简单三级联动效果
Sep 05 jQuery
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 jQuery
使用jquery实现轮播图效果
Jan 02 jQuery
jquery实现动态改变css样式的方法分析
May 27 #jQuery
通过jQuery学习js类型判断的技巧
May 27 #jQuery
jQuery中使用validate插件校验表单功能
May 24 #jQuery
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 #jQuery
jquery+php后台实现省市区联动功能示例
May 23 #jQuery
jQuery Migrate 插件用法实例详解
May 22 #jQuery
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 #jQuery
You might like
为了这两部电子管收音机,买了6套全新电子管和10粒刻度盘灯泡
2021/03/02 无线电
PHP 抓取新浪读书频道的小说并生成txt电子书的代码
2009/12/18 PHP
qq登录,新浪微博登录接口申请过程中遇到的问题
2014/07/22 PHP
PHP获取数组最后一个值的2种方法
2015/01/21 PHP
学习php设计模式 php实现工厂模式(factory)
2015/12/07 PHP
PHP cookie,session的使用与用户自动登录功能实现方法分析
2019/06/05 PHP
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
2013/01/29 Javascript
button没写type=button会导致点击时提交
2014/03/06 Javascript
jQuery中:hidden选择器用法实例
2014/12/30 Javascript
jquery事件的ready()方法使用详解
2015/11/11 Javascript
判断是否存在子节点的实现代码
2016/05/18 Javascript
前端设计师们最常用的JS代码汇总
2016/09/25 Javascript
利用node.js搭建简单web服务器的方法教程
2017/02/20 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
2017/09/05 jQuery
微信小程序中吸底按钮适配iPhone X方案
2017/11/29 Javascript
vue-cli项目代理proxyTable配置exclude的方法
2018/09/20 Javascript
详解Vue中的基本语法和常用指令
2019/07/23 Javascript
pycharm 使用心得(三)Hello world!
2014/06/05 Python
Python使用shelve模块实现简单数据存储的方法
2015/05/20 Python
特征脸(Eigenface)理论基础之PCA主成分分析法
2018/03/13 Python
利用Python进行数据可视化常见的9种方法!超实用!
2018/07/11 Python
在Python 中实现图片加框和加字的方法
2019/01/26 Python
windows下的pycharm安装及其设置中文菜单
2020/04/23 Python
Pygame的程序开始示例代码
2020/05/07 Python
Python基于argparse与ConfigParser库进行入参解析与ini parser
2021/02/02 Python
目前不被任何主流浏览器支持的CSS3属性汇总
2014/07/21 HTML / CSS
html5 视频播放解决方案
2016/11/06 HTML / CSS
详解前端HTML5几种存储方式的总结
2016/12/27 HTML / CSS
HTML5+CSS3:3D展示商品信息示例
2017/01/03 HTML / CSS
美国女士时尚珠宝及配饰购物网站:Icing
2018/07/02 全球购物
美国主要的特色咖啡和茶公司:Peet’s Coffee
2020/02/14 全球购物
七年级数学教学反思
2014/01/22 职场文书
物理专业大学生职业生涯规划书
2014/02/07 职场文书
教师对学生的寄语
2014/04/03 职场文书
班级标语大全
2014/06/21 职场文书
幼儿园大班开学寄语(2015秋季)
2015/05/27 职场文书