js中创建form表单

简介: 有的时候需要在js中创建form向controller提交数据,下面是在工作中遇到的一些问题和解决办法:简单的用jquery创建form:var form = $("<form method = 'post'></form>");var input = $("<input type='hidden' name='name' val

有的时候需要在js中创建form向controller提交数据,下面是在工作中遇到的一些问题和解决办法:

简单的用jquery创建form:

var form  = $("<form method = 'post'></form>");
var input = $("<input type='hidden' name='name' value="+data+">");
form.append(input);
form.submit;

函数封装提交:

function StandardPost (url,args) 
{
    var form = $("<form method='post'></form>");
    form.attr({"action":url});
    for (arg in args)
    {
        var input = $("<input type='hidden'>");
        input.attr({"name":arg});
        input.val(args[arg]);
        form.append(input);
    }
    form.submit();
} 

其中args为格式:{key:value,key1:valye2…},可以一个参数一个参数传,也可以直接传一个jsonString, 在controller中再转化为map,个人更喜欢后一种方法,直接用json的序列化工具(jsonmapper之类),反序列为map,再取值。

上面两种都是jquery创建form,在chrome下可正常使用,但是在firefox下不行,百度之,发现原因是:
经过研究发现,FireFox在提交页面表单时要求页面有完整的标签项,即<html><head><title></title></head><body><form></form</body</html>这样的标签结构

解决方法很简答,给把新建的form添加到一个现存节点即可。
上面的函数修改后代码如下:

function StandardPost (url,args) 
{
    var form = $("<form method='post'></form>");
    form.attr({"action":url});
    for (arg in args)
    {
        var input = $("<input type='hidden'>");
        input.attr({"name":arg});
        input.val(args[arg]);
        form.append(input);
    }
    $("#someid").append(form);
    form.submit();
} 

另外还有一个问题,就是关于提交数据后是从本页面跳转还是新打开页面
可参见: http://blog.csdn.net/natian306/article/details/21527369

相关文章
|
2月前
ractive.js联系表单动画效果源码
一款ractive.js联系表单动画效果,很有创意的发送邮件、联系内容等表单,基于ractive.js实现的动画效果,以发送信件的方式。
28 1
|
2月前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
55 3
|
3月前
|
JavaScript 数据安全/隐私保护
2024了,你会使用原生js批量获取表单数据吗
2024了,你会使用原生js批量获取表单数据吗
66 4
|
3月前
|
JavaScript 前端开发 数据安全/隐私保护
前端技术分享:使用Vue.js构建响应式表单
【10月更文挑战第1天】前端技术分享:使用Vue.js构建响应式表单
|
4月前
|
移动开发 前端开发 JavaScript
JavaScript 表单
JavaScript 表单
31 9
|
4月前
|
移动开发 JavaScript 前端开发
js之操作表单 | 12-4
js之操作表单 | 12-4
|
5月前
|
前端开发 微服务 API
微服务浪潮下的JSF革新:如何在分散式架构中构建统一而强大的Web界面
【8月更文挑战第31天】随着微服务架构的兴起,企业将应用拆分成小型、独立的服务以提高系统可维护性和可扩展性。本文探讨如何在微服务架构下构建和部署JavaServer Faces (JSF) 应用,通过RESTful服务实现前后端分离,提升灵活性和适应性。
71 1
|
4月前
|
人工智能 前端开发 JavaScript
react js 处理表单( form )的2个例子
react js 处理表单( form )的2个例子
|
5月前
|
大数据 数据处理 分布式计算
JSF 逆袭大数据江湖!看前端框架如何挑战数据处理极限?揭秘这场技术与勇气的较量!
【8月更文挑战第31天】在信息爆炸时代,大数据已成为企业和政府决策的关键。JavaServer Faces(JSF)作为标准的 Java Web 框架,如何与大数据技术结合,高效处理大规模数据集?本文探讨大数据的挑战与机遇,介绍 JSF 与 Hadoop、Apache Spark 等技术的融合,展示其实现高效数据存储和处理的潜力,并提供示例代码,助您构建强大的大数据系统。
68 0
|
5月前
|
Devops 持续交付 测试技术
JSF遇上DevOps:开发流程将迎巨变?一篇文章带你领略高效协同的魅力!
【8月更文挑战第31天】本文探讨了如何在JavaServer Faces(JSF)开发中融入DevOps文化,通过持续集成与部署、自动化测试、监控与日志记录及反馈机制,提升软件交付速度与质量。文中详细介绍了使用Jenkins进行自动化部署、JUnit与Selenium进行自动化测试、ELK Stack进行日志监控的具体方法,并强调了持续改进的重要性。
48 0