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 Form轻松实现文件上传
May 24 jQuery
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
一文快速了解JQuery中的AJAX
May 31 jQuery
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
基于JQuery实现页面定时弹出广告
May 08 jQuery
jquery插件实现轮播图效果
Oct 19 jQuery
jQuery实现手风琴特效
Jan 11 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
mysql+php分页类(已测)
2008/03/31 PHP
php程序内部post数据的方法
2015/03/31 PHP
PHP获取用户客户端真实IP的解决方案
2016/10/10 PHP
php+javascript实现的动态显示服务器运行程序进度条功能示例
2017/08/07 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
thinkPHP5.0框架事务处理操作简单示例
2018/09/07 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
javascript 函数式编程
2007/08/16 Javascript
JavaScript 组件之旅(二)编码实现和算法
2009/10/28 Javascript
js 数组克隆方法 小结
2010/03/20 Javascript
javascript日期转换 时间戳转日期格式
2011/11/05 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
2012/12/30 Javascript
JavaScript声明变量时为什么要加var关键字
2014/09/29 Javascript
Node.js操作Firebird数据库教程
2016/03/04 Javascript
深入理解jQuery3.0的domManip函数
2016/09/01 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
2016/09/24 Javascript
微信小程序 获取相册照片实例详解
2016/11/16 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
2017/01/11 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
2017/05/08 jQuery
解决angularjs中同步执行http请求的方法
2018/08/13 Javascript
JavaScript类型相关的常用操作总结
2019/02/14 Javascript
通过实例了解Render Props回调地狱解决方案
2020/11/04 Javascript
Python标准库内置函数complex介绍
2014/11/25 Python
Python实现简单的用户交互方法详解
2018/09/25 Python
Python实现的删除重复文件或图片功能示例【去重】
2019/04/23 Python
Django多数据库的实现过程详解
2019/08/01 Python
用纯css3实现的图片放大镜特效效果非常不错
2014/09/02 HTML / CSS
英国美发和美容产品商城:HQhair
2019/02/08 全球购物
军训生自我鉴定范文
2013/12/27 职场文书
单位婚育证明范本
2014/11/21 职场文书
Vue通过懒加载提升页面响应速度
2021/05/10 Vue.js
教你怎么用PyCharm为同一服务器配置多个python解释器
2021/05/31 Python
Matlab如何实现矩阵复制扩充
2021/06/02 Python
pytorch实现加载保存查看checkpoint文件
2022/07/15 Python
win10如何快速切换窗口 win10切换窗口快捷键分享
2022/07/23 数码科技
centos环境下nginx高可用集群的搭建指南
2022/07/23 Servers