jquery实现动态创建form并提交的方法示例

 更新时间:2019年05月27日 11:18:35   作者:yihaomen  
这篇文章主要介绍了jquery实现动态创建form并提交的方法,结合实例形式分析了jQuery form表单创建与提交相关操作技巧,需要的朋友可以参考下

本文实例讲述了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 form操作技巧汇总》、《jQuery操作json数据技巧汇总》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery表格(table)操作技巧汇总》及《jquery选择器用法总结

希望本文所述对大家jQuery程序设计有所帮助。

相关文章

  • 浅谈jQuery中的$.extend方法来扩展JSON对象

    浅谈jQuery中的$.extend方法来扩展JSON对象

    下面小编就为大家带来一篇浅谈jQuery中的$.extend方法来扩展JSON对象。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • 全面详细的jQuery常见开发技巧手册

    全面详细的jQuery常见开发技巧手册

    这篇文章主要为大家分享了一份全面详细的jQuery常见开发技巧手册,帮助大家更好的进行jquery开发,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • 详解jquery事件delegate()的使用方法

    详解jquery事件delegate()的使用方法

    这篇文章主要详解了jquery事件delegate()的使用方法,delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • jQuery实现连续动画效果实例分析

    jQuery实现连续动画效果实例分析

    这篇文章主要介绍了jQuery实现连续动画效果,实例分析了animate方法实现动画效果的相关技巧,并备有较为详尽的注释供读者学习参考,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • jQuery防止重复绑定事件的解决方法

    jQuery防止重复绑定事件的解决方法

    这篇文章主要介绍了jQuery防止重复绑定事件的解决方法,结合实例形式分析了jQuery的重复绑定问题与相应的解决方法,需要的朋友可以参考下
    2016-05-05
  • jQuery学习心得总结(必看篇)

    jQuery学习心得总结(必看篇)

    下面小编就为大家带来一篇jQuery学习心得总结(必看篇)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • JQuery radio(单选按钮)操作方法汇总

    JQuery radio(单选按钮)操作方法汇总

    这篇文章主要介绍了JQuery radio(单选按钮)操作方法汇总,本文讲解了获取选中值、设置选中值、根据Value值设置选中、删除Radio、遍历等内容,需要的朋友可以参考下
    2015-04-04
  • 轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车

    轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车

    这篇文章主要帮助大家轻松学习EasyUI实现拖放商品放置购物车的功能,购物篮中的物品和价格也将进行更新,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • 基于jQuery实现复选框是否选中进行答题提示

    基于jQuery实现复选框是否选中进行答题提示

    近期有项目需求是这样的,需要根据用户选择的选项给出相应的提示,本文给大家介绍基于jQuery实现复选框是否选中进行答题提示,对jquery复选框是否选中相关知识感兴趣的朋友一起看看吧
    2015-12-12
  • jQuery操作Dom元素与遍历以及JS遍历详细讲解

    jQuery操作Dom元素与遍历以及JS遍历详细讲解

    这篇文章主要介绍了jQuery操作Dom元素、jQuery遍历、JavaScript遍历,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2023-01-01

最新评论