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 EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
jQuery实现鼠标滑过预览图片大图效果的方法
Apr 26 jQuery
jquery实现图片放大点击切换
Jun 06 jQuery
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
jquery中有哪些api jQuery主要API
Nov 20 jQuery
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
jQuery实现轮播图效果
Nov 26 jQuery
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 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
ThinkPHP打水印及设置水印位置的方法
2016/10/14 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
PHP 实现base64编码文件上传出现问题详解
2020/09/01 PHP
javascript 时间比较实现代码
2009/10/28 Javascript
Jquery css函数用法(判断标签是否拥有某属性)
2011/05/28 Javascript
javascript中的undefined和not defined区别示例介绍
2014/02/26 Javascript
JS中怎样判断undefined(比较不错的方法)
2014/03/27 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
2015/03/02 Javascript
Javascript中的getUTCHours()方法使用详解
2015/06/10 Javascript
JavaScript检查子字符串是否在字符串中的方法
2016/02/03 Javascript
第六篇Bootstrap表格样式介绍
2016/06/21 Javascript
jQuery ajax动态生成table功能示例
2017/06/14 jQuery
JS判断时间段的实现代码
2017/06/14 Javascript
js移动端事件基础及常用事件库详解
2017/08/15 Javascript
详解使用element-ui table组件的筛选功能的一个小坑
2018/11/02 Javascript
vue组件开发之tab切换组件使用详解
2020/08/21 Javascript
解决vue项目 build之后资源文件找不到的问题
2020/09/12 Javascript
jquery自定义组件实例详解
2020/12/31 jQuery
Python中的Django基本命令实例详解
2018/07/15 Python
python实现本地图片转存并重命名的示例代码
2018/10/27 Python
pytorch制作自己的LMDB数据操作示例
2019/12/18 Python
python中的subprocess.Popen()使用详解
2019/12/25 Python
pycharm设置当前工作目录的操作(working directory)
2020/02/14 Python
浅谈ROC曲线的最佳阈值如何选取
2020/02/28 Python
Python 随机按键模拟2小时
2020/12/30 Python
Html5 localStorage入门教程
2018/04/26 HTML / CSS
伦敦著名的运动鞋综合商店:Footpatrol
2019/03/25 全球购物
世界领先的电子书网站:eBooks.com(在线购买小说、非小说和教科书)
2019/03/30 全球购物
2014个人四风对照检查材料思想汇报
2014/09/18 职场文书
机关党员四风问题个人整改措施
2014/10/26 职场文书
群众路线剖析材料(四风)
2014/11/05 职场文书
支行行长竞聘报告
2014/11/06 职场文书
2014年政协工作总结
2014/12/09 职场文书
2019学子的答谢词范本!
2019/07/05 职场文书
Filebeat 采集 Nginx 日志的方法
2021/03/31 Servers
Nginx本地目录映射实现代码实例
2021/03/31 Servers