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 10 jQuery
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
使用 jQuery 实现表单验证功能
Jul 05 jQuery
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
jQuery解析json格式数据示例
Sep 01 jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
jQuery pjax 应用简单示例
Sep 20 jQuery
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
jquery插件实现搜索历史
Apr 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 addslashes和mysql_real_escape_string
2010/01/24 PHP
php截取中文字符串不乱码的方法
2013/12/25 PHP
PHP中strlen()和mb_strlen()的区别浅析
2014/06/19 PHP
thinkphp,onethink和thinkox中验证码不显示的解决方法分析
2016/06/06 PHP
php异步:在php中使用fsockopen curl实现类似异步处理的功能方法
2016/12/10 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
一个JS翻页效果
2007/07/23 Javascript
jQuery中$.each使用详解
2015/01/29 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
2015/05/12 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
2016/07/01 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
2017/09/28 Javascript
es6中let和const的使用方法详解
2020/02/24 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
2020/05/16 Javascript
Vue 监听元素前后变化值实例
2020/07/29 Javascript
针对Vue路由history模式下Nginx后台配置操作
2020/10/22 Javascript
vue video和vue-video-player实现视频铺满教程
2020/10/30 Javascript
[02:53]DOTA2英雄昆卡基础教程
2013/11/25 DOTA
python中self原理实例分析
2015/04/30 Python
给Python中的MySQLdb模块添加超时功能的教程
2015/05/05 Python
基于Python的关键字监控及告警
2017/07/06 Python
python编程实现随机生成多个椭圆实例代码
2018/01/03 Python
Python中logging实例讲解
2019/01/17 Python
PyQt5组件读取参数的实例
2019/06/25 Python
Tensorflow Summary用法学习笔记
2020/01/10 Python
你可能不知道的Python 技巧小结
2020/01/29 Python
Python如何将函数值赋给变量
2020/04/28 Python
Python用来做Web开发的优势有哪些
2020/08/05 Python
CSS3中引入多种自定义字体font-face
2020/06/12 HTML / CSS
html5 canvas实现跟随鼠标旋转的箭头
2016/03/11 HTML / CSS
HTML5添加禁止缩放功能
2017/11/03 HTML / CSS
亚马逊西班牙购物网站:amazon西班牙
2017/03/06 全球购物
学校爱国卫生月活动总结
2014/06/25 职场文书
2015年入党积极分子评语
2015/03/26 职场文书
文艺晚会开场白
2015/05/29 职场文书
法制教育观后感
2015/06/17 职场文书
高效课堂教学反思
2016/02/24 职场文书