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动态追加页面数据以及事件委托详解
May 06 jQuery
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
jquery判断滚动条距离顶部的距离方法
Sep 05 jQuery
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
jQuery+PHP实现上传裁剪图片
Jun 29 jQuery
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 jQuery
jQuery实现倒计时功能完整示例
Jun 01 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过滤危险html代码的函数
2008/07/22 PHP
一个好用的PHP验证码类实例分享
2013/12/27 PHP
一个PHP二维数组排序的函数分享
2014/01/17 PHP
PHP中的输出echo、print、printf、sprintf、print_r和var_dump的示例代码
2020/12/01 PHP
图片自动缩小的js代码,用以防止图片撑破页面
2007/03/12 Javascript
Javascript 调试利器 Firebug使用详解六
2009/07/05 Javascript
用document.documentElement取代document.body的原因分析
2009/11/12 Javascript
JQuery Tips(4) 一些关于提高JQuery性能的Tips
2009/12/19 Javascript
Jquery绑定事件(bind和live的区别介绍)
2013/08/23 Javascript
详解JavaScript中的事件流和事件处理程序
2016/05/20 Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
2016/06/03 Javascript
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
javascript实现文字无缝滚动效果
2017/08/26 Javascript
微信小程序实现轮播图效果
2017/09/07 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
2017/10/31 Javascript
python正则中最短匹配实现代码
2018/01/16 Python
Python设计模式之组合模式原理与用法实例分析
2019/01/11 Python
Python设计模式之工厂方法模式实例详解
2019/01/18 Python
python实现植物大战僵尸游戏实例代码
2019/06/10 Python
python lambda表达式在sort函数中的使用详解
2019/08/28 Python
pandas read_excel()和to_excel()函数解析
2019/09/19 Python
python使用pandas抽样训练数据中某个类别实例
2020/02/28 Python
Python垃圾回收机制三种实现方法
2020/04/27 Python
python反扒机制的5种解决方法
2021/02/06 Python
用css3制作纸张效果(外翻卷角)
2013/02/01 HTML / CSS
CSS3中设置3D变形的transform-style属性详解
2016/05/23 HTML / CSS
深入剖析HTML5 内联框架iFrame
2016/05/04 HTML / CSS
HTML5 虚拟键盘出现挡住输入框的解决办法
2017/02/14 HTML / CSS
离婚协议书怎么写2014
2014/09/30 职场文书
部队2014年终工作总结
2014/11/27 职场文书
教师个人年终总结
2015/02/11 职场文书
《牧场之国》教学反思
2016/02/22 职场文书
快消品行业营销模式与盈利模式分享
2019/09/27 职场文书
六年级作文之家庭作文
2019/12/12 职场文书
详解Html5项目适配系统深色模式方案总结
2021/04/14 HTML / CSS
Vue项目打包、合并及压缩优化网页响应速度
2021/07/07 Vue.js