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 29 jQuery
jquery Form轻松实现文件上传
May 24 jQuery
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
jquery的 filter()方法使用教程
Mar 22 jQuery
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
jQuery位置选择器用法实例分析
Jun 28 jQuery
jquery实现进度条状态展示
Mar 26 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
论建造顺序的重要性
2020/03/04 星际争霸
php中数据的批量导入(csv文件)
2006/10/09 PHP
pw的一个放后门的方法分析
2007/10/08 PHP
php学习笔记之面向对象编程
2012/12/29 PHP
php无限极分类实现的两种解决方法
2013/04/28 PHP
PHP版 汉字转码的实现详解
2013/06/09 PHP
php swoole多进程/多线程用法示例【基于php7nts版】
2019/08/12 PHP
Laravel统一错误处理为JSON的方法介绍
2020/10/18 PHP
js实现的网页颜色代码表全集
2007/07/17 Javascript
基于JQuery的asp.net树实现代码
2010/11/30 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
2016/04/06 Javascript
vue-loader教程介绍
2017/06/14 Javascript
详解vue项目构建与实战
2017/06/27 Javascript
Vue中正确使用jQuery的方法
2017/10/30 jQuery
微信小程序简单实现form表单获取输入数据功能示例
2017/11/30 Javascript
vue.js数据绑定操作详解
2018/04/23 Javascript
图片文字识别(OCR)插件Ocrad.js教程
2018/11/26 Javascript
vue百度地图 + 定位的详解
2019/05/13 Javascript
JS轮播图的实现方法2
2020/08/25 Javascript
[37:22]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第一局
2016/02/28 DOTA
python对象及面向对象技术详解
2016/07/19 Python
python实现爬虫抓取小说功能示例【抓取金庸小说】
2019/08/09 Python
详解python 降级到3.6终极解决方案
2020/02/06 Python
Python关键字及可变参数*args,**kw原理解析
2020/04/04 Python
python 获取剪切板内容的两种方法
2020/11/28 Python
Charlotte Tilbury澳大利亚官网:英国美妆品牌
2018/10/05 全球购物
全球速卖通俄罗斯站:AliExpress俄罗斯
2019/06/17 全球购物
什么叫做SQL注入,如何防止
2016/10/04 面试题
教师个人的自我评价分享
2014/01/02 职场文书
大学生工作求职信
2014/06/23 职场文书
普通话宣传标语
2014/06/26 职场文书
通知函格式范文
2015/04/27 职场文书
2021年pycharm的最新安装教程及基本使用图文详解
2021/04/03 Python
解决python绘图使用subplots出现标题重叠的问题
2021/04/30 Python
MySQL中的布尔值,怎么存储false或true
2021/06/04 MySQL
MySQL深度分页(千万级数据量如何快速分页)
2021/07/25 MySQL