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 13 jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
jQuery 表单序列化实例代码
Jun 11 jQuery
jquery拖动改变div大小
Jul 04 jQuery
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 jQuery
jQuery操作元素追加内容示例
Jan 10 jQuery
jquery实现手风琴案例
May 04 jQuery
jquery插件懒加载的示例
Oct 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语法(1)
2006/10/09 PHP
AMFPHP php远程调用(RPC, Remote Procedure Call)工具 快速入门教程
2010/05/10 PHP
PHP实现的购物车类实例
2015/06/17 PHP
php中array_slice和array_splice函数解析
2016/10/18 PHP
PHP实现文字写入图片功能
2019/02/18 PHP
php的命名空间与自动加载实现方法
2019/08/25 PHP
javascript document.images实例
2008/05/27 Javascript
JQUERY获取form表单值的代码
2010/07/17 Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
2010/12/10 Javascript
用nodejs实现PHP的print_r函数代码
2014/03/14 NodeJs
封装好的一个万能检测表单的方法
2015/01/21 Javascript
JQuery控制Radio选中方法分析
2015/05/29 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
2015/08/25 Javascript
JS中JSON对象和String之间的互转及处理技巧
2016/04/06 Javascript
基于BootStrap的图片轮播效果展示实例代码
2016/05/23 Javascript
Bootstrap零基础入门教程(三)
2016/07/18 Javascript
plupload+artdialog实现多平台上传文件
2016/07/19 Javascript
Backbone中View之间传值的学习心得
2016/08/09 Javascript
jQuery Pagination分页插件使用方法详解
2017/02/28 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
2017/03/02 Javascript
vue+element实现图片上传及裁剪功能
2020/06/29 Javascript
[51:06]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第二场 1月26日
2021/03/11 DOTA
解析Python中的生成器及其与迭代器的差异
2016/06/20 Python
Django中间件拦截未登录url实例详解
2019/09/03 Python
Vs Code中8个好用的python 扩展插件
2020/10/12 Python
Python 微信公众号文章爬取的示例代码
2020/11/30 Python
澳大利亚相机之家:Camera House
2017/11/30 全球购物
求职推荐信范文
2013/12/01 职场文书
中式面点餐厅创业计划书
2014/01/29 职场文书
中餐厅经理岗位职责
2014/04/11 职场文书
优秀语文教师事迹
2014/05/18 职场文书
党的群众路线教育实践活动个人整改方案
2014/09/21 职场文书
房屋出租协议书范本(标准版)
2014/09/24 职场文书
党员个人整改措施
2014/10/24 职场文书
2016年大学光棍节活动总结
2016/04/05 职场文书
PostgreSQL聚合函数介绍以及分组和排序
2022/04/12 PostgreSQL