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 相关文章推荐
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
jquery层次选择器的介绍
Jan 18 jQuery
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
jQuery 实现扁平式小清新导航
Jul 07 jQuery
jQuery+ThinkPHP实现图片上传
Jul 23 jQuery
jQuery实现简单弹幕制作
Dec 10 jQuery
原生jQuery实现只显示年份下拉框
Dec 24 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
php中去除所有js,html,css代码
2010/10/12 PHP
php常用数学函数汇总
2014/11/21 PHP
PHP使用memcache缓存技术提高响应速度的方法
2014/12/26 PHP
php随机抽奖实例分析
2015/03/04 PHP
PHP中使用BigMap实例
2015/03/30 PHP
Yii框架结合sphinx,Ajax实现搜索分页功能示例
2016/10/18 PHP
thinkPHP中session()方法用法详解
2016/12/08 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
实例化php类时传参的方法分析
2020/06/05 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2006/11/24 Javascript
Jquery 实现Tab效果 思路是js思路
2010/03/02 Javascript
js 数值项目的格式化函数代码
2010/05/14 Javascript
document.getElementById介绍
2011/09/13 Javascript
探究JavaScript函数式编程的乐趣
2015/12/14 Javascript
AngularJS延迟加载html template
2016/07/27 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
2017/05/03 Javascript
Swiper实现轮播图效果
2017/07/03 Javascript
ES6模块化的import和export用法方法总结
2017/08/08 Javascript
vue webpack打包优化操作技巧
2018/02/22 Javascript
vue实现压缩图片预览并上传功能(promise封装)
2019/01/10 Javascript
node基于async/await对mysql进行封装
2019/06/20 Javascript
webpack打包优化的几个方法总结
2020/02/10 Javascript
用Python解析XML的几种常见方法的介绍
2015/04/09 Python
用python实现简单EXCEL数据统计的实例
2017/01/24 Python
python 使用get_argument获取url query参数
2017/04/28 Python
Python安装selenium包详细过程
2019/07/23 Python
python字典的值可以修改吗
2020/06/29 Python
Python3爬虫ChromeDriver的安装实例
2021/02/06 Python
如何用H5实现一个触屏版的轮播器的实例
2017/01/09 HTML / CSS
英国婴儿及儿童产品商店:TigerParrot
2019/03/04 全球购物
家佳咖啡店创业计划书
2013/12/27 职场文书
《锄禾》教学反思
2014/04/08 职场文书
社区护士演讲稿
2014/08/27 职场文书
关于拾金不昧的感谢信
2015/01/21 职场文书
Python爬虫进阶之Beautiful Soup库详解
2021/04/29 Python
vue+iview实现手机号分段输入框
2022/03/25 Vue.js