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 控制文本框自动缩小字体填充
Jun 16 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
React中jquery引用的实现方法
Sep 12 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
Jquery异步上传文件代码实例
Nov 13 jQuery
jquery绑定事件 bind和on的用法与区别分析
May 22 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读注册表
2006/10/09 PHP
一道求$b相对于$a的相对路径的php代码
2010/08/08 PHP
php5.4以下版本json不支持不转义内容中文的解决方法
2015/01/13 PHP
PHP操作MySQL的mysql_fetch_* 函数的常见用法教程
2015/12/25 PHP
PHP聚合式迭代器接口IteratorAggregate用法分析
2017/12/28 PHP
JQuery Ajax 跨域访问的解决方案
2010/03/12 Javascript
jquery实现居中弹出层代码
2010/08/25 Javascript
NodeJS学习笔记之网络编程
2014/08/03 NodeJs
JavaScript数组对象实现增加一个返回随机元素的方法
2015/07/27 Javascript
JavaScript中捕获与冒泡详解及实例
2017/02/03 Javascript
通过一个简单的例子学会vuex与模块化
2017/11/22 Javascript
spirngmvc js传递复杂json参数到controller的实例
2018/03/29 Javascript
Node.js console控制台简单用法分析
2019/01/04 Javascript
vue项目打包之后背景样式丢失的解决方案
2019/01/17 Javascript
原生JS实现动态添加新元素、删除元素方法
2019/05/05 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
2019/08/27 Javascript
Python中获取网页状态码的两个方法
2014/11/03 Python
pymssql数据库操作MSSQL2005实例分析
2015/05/25 Python
Python爬取附近餐馆信息代码示例
2017/12/09 Python
python使用KNN算法识别手写数字
2019/04/25 Python
Numpy之将矩阵拉成向量的实例
2019/11/30 Python
pytorch下使用LSTM神经网络写诗实例
2020/01/14 Python
Python 格式化打印json数据方法(展开状态)
2020/02/27 Python
浅谈python的elementtree模块处理中文注意事项
2020/03/06 Python
Tensorflow之MNIST CNN实现并保存、加载模型
2020/06/17 Python
美国第一个网上卖鞋零售商:OnlineShoes.com
2017/09/24 全球购物
医学检验专业大学生求职信
2013/11/18 职场文书
医学专业毕业生个人求职信
2013/12/25 职场文书
《难忘的泼水节》教学反思
2014/02/27 职场文书
行政助理工作职责范本
2014/03/04 职场文书
供货协议书范本
2014/04/22 职场文书
环保标语大全
2014/06/12 职场文书
班级活动总结格式
2014/08/30 职场文书
2015年终个人政治思想工作总结
2015/11/24 职场文书
2016年质量月活动总结报告
2016/04/05 职场文书
SpringBoot中HttpSessionListener的简单使用方式
2022/03/17 Java/Android