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 Layout实现tabs标签的实例
Sep 26 jQuery
JQuery 又谈ajax局部刷新
Nov 27 jQuery
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
jQuery 筛选器简单操作示例
Oct 02 jQuery
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
JQuery复选框全选效果如何实现
May 08 jQuery
如何在vue 中引入使用jquery
Nov 10 jQuery
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 jQuery
jQuery-App输入框实现实时搜索
Nov 19 jQuery
jquery实现穿梭框功能
Jan 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封装的一个支持HTML、JS、PHP重定向的多功能跳转函数
2014/06/19 PHP
PHP生成静态HTML文档实现代码
2016/06/23 PHP
PHP两种实现无级递归分类的方法
2017/03/02 PHP
PHP实现批量删除(封装)
2017/04/28 PHP
yii2.0框架数据库操作简单示例【添加,修改,删除,查询,打印等】
2020/04/13 PHP
Javascript 判断Flash是否加载完成的代码
2010/04/12 Javascript
jQuery语法总结和注意事项小结
2012/11/11 Javascript
浅谈javascript中this在事件中的应用
2015/02/15 Javascript
jQuery插件扩展实例【添加回调函数】
2016/11/26 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
2017/09/15 Javascript
JS实现留言板功能[楼层效果展示]
2017/12/27 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
2018/12/26 Javascript
javascript for循环性能测试示例
2019/08/07 Javascript
JavaScript 替换所有匹配内容及正则替换方法
2020/02/12 Javascript
解决vue项目获取dom元素宽高总是不准确问题
2020/07/29 Javascript
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
2020/12/15 Vue.js
[06:06]2018DOTA2亚洲邀请赛主赛事第四日战况回顾 全明星赛欢乐上演
2018/04/07 DOTA
如何运行.ipynb文件的图文讲解
2019/06/27 Python
django-allauth入门学习和使用详解
2019/07/03 Python
Python利用逻辑回归分类实现模板
2020/02/15 Python
opencv 实现特定颜色线条提取与定位操作
2020/06/02 Python
Python 测试框架unittest和pytest的优劣
2020/09/26 Python
Python爬虫实现selenium处理iframe作用域问题
2021/01/27 Python
Pycharm 如何一键加引号的方法步骤
2021/02/05 Python
浅谈css3新单位vw、vh、vmin、vmax的使用详解
2017/12/01 HTML / CSS
网络编辑岗位职责范本
2014/02/10 职场文书
《跨越百年的美丽》教学反思
2014/02/11 职场文书
《燕子》教学反思
2014/02/18 职场文书
成人继续教育实施方案
2014/03/01 职场文书
2014年幼儿园植树节活动方案
2014/03/02 职场文书
办公室文员岗位职责范本
2014/06/12 职场文书
社区党的群众路线教育实践活动总结材料
2014/10/31 职场文书
舞蹈社团活动总结
2015/05/07 职场文书
费城故事观后感
2015/06/10 职场文书
感谢师恩主题班会
2015/08/17 职场文书
《金钱的魔力》教学反思
2016/02/20 职场文书