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

相关文章
|
1月前
|
JavaScript 前端开发
JavaScript如何遍历表单元素?
JavaScript如何遍历表单元素?
|
1月前
编程笔记 html5&css&js 022 HTML表单概要
编程笔记 html5&css&js 022 HTML表单概要
|
2月前
|
移动开发 JavaScript 前端开发
分享88个表单按钮JS特效,总有一款适合您
分享88个表单按钮JS特效,总有一款适合您
31 1
|
2月前
|
存储 移动开发 JSON
分享86个表单按钮JS特效,总有一款适合您
分享86个表单按钮JS特效,总有一款适合您
33 1
|
3月前
|
移动开发 JavaScript 前端开发
分享95个JS表单脚本,总有一款适合您
分享95个JS表单脚本,总有一款适合您
27 0
|
3月前
|
移动开发 JavaScript 前端开发
分享106个JS表单脚本,总有一款适合您
分享106个JS表单脚本,总有一款适合您
17 0
|
1月前
|
移动开发 HTML5
编程笔记 html5&css&js 024 HTML表单元素
编程笔记 html5&css&js 024 HTML表单元素
|
1月前
编程笔记 html5&css&js 023 HTML表单属性
编程笔记 html5&css&js 023 HTML表单属性
|
2月前
|
JavaScript 前端开发
js制作动态表单
js制作动态表单
18 0
|
2月前
|
移动开发 JSON JavaScript
分享76个表单按钮JS特效,总有一款适合您
分享76个表单按钮JS特效,总有一款适合您
24 5