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插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 jQuery
基于jQuery实现文字打印动态效果
Apr 21 jQuery
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 jQuery
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
jQuery实现轮播图源码
Oct 23 jQuery
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
jQuery实现动态向上滚动
Dec 21 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面向对象全攻略 (十二) 抽象方法和抽象类
2009/09/30 PHP
Windows和Linux中php代码调试工具Xdebug的安装与配置详解
2014/05/08 PHP
eclipse php wamp配置教程
2016/06/30 PHP
PHP微信红包生成代码分享
2016/10/06 PHP
理解Javascript_01_理解内存分配原理分析
2010/10/11 Javascript
JavaScript 更严格的相等 [译]
2012/09/20 Javascript
js中的前绑定和后绑定详解
2013/08/01 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
2013/08/30 Javascript
jQuery实现点击小图显示大图代码分享
2015/08/25 Javascript
jQuery实现Tab菜单滚动切换的方法
2015/09/21 Javascript
深入解析JavaScript编程中的this关键字使用
2015/11/09 Javascript
移动手机APP手指滑动切换图片特效附源码下载
2015/11/30 Javascript
一道常被人轻视的web前端常见面试题(JS)
2016/02/15 Javascript
浅析JS原型继承与类的继承
2016/04/07 Javascript
AngularJS实现在ng-Options加上index的解决方法
2016/11/03 Javascript
使用Ajax与服务器(JSON)通信实例
2016/11/04 Javascript
Bootstrap和Java分页实例第二篇
2016/12/23 Javascript
vue的安装及element组件的安装方法
2018/03/09 Javascript
JS删除String里某个字符的方法
2021/01/06 Javascript
实现vuex与组件data之间的数据同步更新方式
2019/11/12 Javascript
Python中使用strip()方法删除字符串中空格的教程
2015/05/20 Python
Python3操作SQL Server数据库(实例讲解)
2017/10/21 Python
使用Python实现在Windows下安装Django
2018/10/17 Python
numpy.ndarray 实现对特定行或列取值
2019/12/05 Python
简单了解python调用其他脚本方法实例
2020/03/26 Python
详解如何在PyCharm控制台中输出彩色文字和背景
2020/08/17 Python
英国名牌男装店:Standout
2021/02/17 全球购物
网络、C以及其他硬件方面的面试题
2016/08/23 面试题
经典演讲稿范文
2013/12/30 职场文书
汉语言文学毕业求职信
2014/07/17 职场文书
赔偿协议书
2015/01/27 职场文书
学习雷锋主题班会
2015/08/14 职场文书
人生一定要学会的三样东西:放下、忘记、珍惜
2019/08/21 职场文书
Python基础之函数嵌套知识总结
2021/05/23 Python
mysql事务隔离级别详情
2021/10/24 MySQL
Docker容器harbor私有仓库部署和管理
2022/08/05 Servers