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,Angular实现登录界面验证码详解
Apr 27 jQuery
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 jQuery
jQuery使用each遍历循环的方法
Sep 19 jQuery
jQuery无冲突模式详解
Jan 17 jQuery
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 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
PHPMailer 中文使用说明小结
2010/01/22 PHP
探讨:使用XMLSerialize 序列化与反序列化
2013/06/08 PHP
CodeIgniter启用缓存和清除缓存的方法
2014/06/12 PHP
php中Redis的应用--消息传递
2017/03/28 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
jquery插件制作 手风琴Panel效果实现
2012/08/17 Javascript
Js base64 加密解密介绍
2013/10/11 Javascript
查找页面中所有类为test的结点的方法
2014/03/28 Javascript
node.js微信公众平台开发教程
2016/03/04 Javascript
javascript断点调试心得分享
2016/04/23 Javascript
jquery html动态添加的元素绑定事件详解
2016/05/24 Javascript
Jquery中map函数的用法
2016/06/03 Javascript
关于Vue.js一些问题和思考学习笔记(1)
2016/12/02 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
2016/12/02 Javascript
JavaScript实现三级联动效果
2017/07/15 Javascript
vue 里面使用axios 和封装的示例代码
2017/09/01 Javascript
Vue.js更改调试地址端口号的实例
2018/09/19 Javascript
JavaScript实现页面高亮操作提示和蒙板
2021/01/04 Javascript
在Python中使用Mako模版库的简单教程
2015/04/08 Python
python散点图实例之随机漫步
2018/08/27 Python
python dict 相同key 合并value的实例
2019/01/21 Python
对python判断ip是否可达的实例详解
2019/01/31 Python
Python面向对象程序设计之私有属性及私有方法示例
2019/04/08 Python
python 杀死自身进程的实现方法
2019/07/01 Python
django框架模板语言使用方法详解
2019/07/18 Python
django解决订单并发问题【推荐】
2019/07/31 Python
pytorch 彩色图像转灰度图像实例
2020/01/13 Python
关于Python字符串显示u...的解决方式
2020/03/06 Python
Python 中如何使用 virtualenv 管理虚拟环境
2021/01/21 Python
CSS3 3D立方体效果示例-transform也不过如此
2016/12/05 HTML / CSS
The North Face北面荷兰官网:美国著名户外品牌
2019/10/16 全球购物
安全标准化实施方案
2014/02/20 职场文书
《猴子种果树》教学反思
2014/04/26 职场文书
公司股份转让协议书范本
2015/01/28 职场文书
Python使用sql语句对mysql数据库多条件模糊查询的思路详解
2021/04/12 Python
使用Postman测试需要授权的接口问题
2022/06/21 Java/Android