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实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
jquery中done和then的区别(详解)
Dec 19 jQuery
jQuery中复合选择器简单用法示例
Mar 31 jQuery
JQuery扩展对象方法操作示例
Aug 21 jQuery
jquery获取img的src值实例介绍
Jan 16 jQuery
js/jQuery实现全选效果
Jun 17 jQuery
jQuery中DOM操作原则实例分析
Aug 01 jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
jquery ajax 请求小技巧实例分析
Nov 11 jQuery
jQuery 动态粒子效果示例代码
Jul 07 jQuery
jquery实现拖拽小方块效果
Dec 10 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删除与复制文件夹及其文件夹下所有文件的实现代码
2013/01/23 PHP
php获取淘宝分类id示例
2014/01/16 PHP
遍历echsop的region表形成缓存的程序实例代码
2016/11/01 PHP
HTML中不支持静态Expando的元素的问题
2007/03/08 Javascript
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
2009/11/30 Javascript
javascript面向对象程序设计(一)
2015/01/29 Javascript
jQuery网页选项卡插件rTabs用法实例分析
2015/08/26 Javascript
javascript学习总结之js使用技巧
2015/09/02 Javascript
javascript日期处理函数,性能优化批处理
2015/09/06 Javascript
JQuery标签页效果的两个实例讲解(4)
2015/09/17 Javascript
jQuery 移动端artEditor富文本编辑器
2016/01/11 Javascript
同步文本框内容JS代码实现
2016/08/04 Javascript
JS组件系列之JS组件封装过程详解
2017/04/28 Javascript
JavaScript设计模式之单例模式简单实例教程
2018/07/02 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
2019/07/03 Javascript
vue实现商城秒杀倒计时功能
2019/12/12 Javascript
详解JavaScript 事件流
2020/09/02 Javascript
vue 授权获取微信openId操作
2020/11/13 Javascript
[03:42]2014DOTA2西雅图国际邀请赛7月9日TOPPLAY
2014/07/09 DOTA
跟老齐学Python之深入变量和引用对象
2014/09/24 Python
python和shell实现的校验IP地址合法性脚本分享
2014/10/23 Python
matplotlib实现热成像图colorbar和极坐标图的方法
2018/12/13 Python
python Django的web开发实例(入门)
2019/07/31 Python
移动端Html5页面生成图片解决方案
2018/08/07 HTML / CSS
canvas 橡皮筋式线条绘图应用方法
2019/02/13 HTML / CSS
维氏瑞士军刀英国网站:Victorinox英国
2019/07/04 全球购物
Aurora London官网:奢华、负担得起的皮革手袋
2020/08/01 全球购物
标准化管理实施方案
2014/02/25 职场文书
工作粗心大意检讨书
2014/09/18 职场文书
学习退步检讨书
2014/09/28 职场文书
升学宴学生答谢词
2015/01/05 职场文书
地球一小时活动总结
2015/02/27 职场文书
后勤工作个人总结
2015/02/28 职场文书
电影地道战观后感
2015/06/04 职场文书
《梅花魂》教学反思
2016/02/18 职场文书
干货:如何写好观后感 !
2019/05/21 职场文书