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实现前端分页功能
Mar 23 jQuery
jquery easyui如何实现格式化列
Jul 30 jQuery
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 jQuery
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
jQuery实现滑动星星评分效果(每日分享)
Nov 13 jQuery
jQuery实现简单弹幕效果
Nov 28 jQuery
jQuery实现放大镜案例
Oct 19 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 301转向实现代码
2008/09/18 PHP
PHP数组与对象之间使用递归实现转换的方法
2015/06/24 PHP
php使用gd2绘制基本图形示例(直线、圆、正方形)
2017/02/15 PHP
jqeury-easyui-layout问题解决方法
2014/03/24 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
2014/05/08 Javascript
jquery uploadify 在FF下无效的解决办法
2014/09/26 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
2015/11/18 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
AngularJS中$http的交互问题
2017/03/29 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
js 判断一个数字是不是2的n次方幂的实例
2017/11/26 Javascript
vscode下vue项目中eslint的使用方法
2019/01/13 Javascript
动态实现element ui的el-table某列数据不同样式的示例
2021/01/22 Javascript
在nodejs中创建child process的方法
2021/01/26 NodeJs
Python的randrange()方法使用教程
2015/05/15 Python
Python和JavaScript间代码转换的4个工具
2016/02/22 Python
Python解析json文件相关知识学习
2016/03/01 Python
go和python变量赋值遇到的一个问题
2017/08/31 Python
numpy使用技巧之数组过滤实例代码
2018/02/03 Python
详谈python3 numpy-loadtxt的编码问题
2018/04/29 Python
在Pycharm中调试Django项目程序的操作方法
2019/07/17 Python
python调用支付宝支付接口流程
2019/08/15 Python
python3正则模块re的使用方法详解
2020/02/11 Python
世界顶级户外运动品牌折扣网站:LeftLane Sports
2019/06/12 全球购物
remote接口和home接口主要作用
2013/05/15 面试题
商场活动策划方案
2014/01/24 职场文书
财务部副经理岗位职责
2014/03/14 职场文书
法律进学校实施方案
2014/03/15 职场文书
2014年寒假社会实践活动心得体会
2014/04/07 职场文书
老师对学生的评语
2014/04/18 职场文书
党员思想汇报材料
2014/12/19 职场文书
可怜妈妈观后感
2015/06/09 职场文书
心理健康教育主题班会
2015/08/13 职场文书
2016年寒假社会实践活动总结
2015/10/10 职场文书
python 自动化偷懒的四个实用操作
2021/04/11 Python
InterProcessMutex实现zookeeper分布式锁原理
2022/03/21 Java/Android