js中创建form表单

最新推荐文章于 2023-07-05 10:26:41 发布

原创最新推荐文章于 2023-07-05 10:26:41 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

jquery 专栏收录该内容

3 篇文章

订阅专栏

有的时候需要在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();
}