js中创建form表单

有的时候需要在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

时间: 2024-11-05 16:37:53

js中创建form表单的相关文章

在jsp中提交form表单不能跳转进方法

问题描述 在jsp中提交form表单不能跳转进方法 我用的form表单提交的,jsp里 这样,js是function search(){ var myselec = $('#myselectHidden').val(); $.ajax({ type:'POST', data: {param:"myselec",isAll:"yes",param2:myselec}, url:'outQueryOption', success:function(data){ var

JavaScript动态创建form表单并提交的实现方法_javascript技巧

本文实例讲述了JavaScript动态创建form表单并提交的实现方法.分享给大家供大家参考,具体如下: 页面布局有些复杂的情况下,可能需要在页面中动态创建一个 form,JavaScript 创建 form 演示如下: // JavaScript 构建一个 form function MakeForm() { // 创建一个 form var form1 = document.createElement("form"); form1.id = "form1"; f

EasyUI中实现form表单提交的示例分享

这里给大家分享的是一段使用EasyUI中实现form表单提交的方法的核心代码,小伙伴们根据自己的需求补全form部分吧,希望大家能够喜欢. 代码如下: $('#form').form({ url : 'test/add.do', onSubmit : function() { parent.$.messager.progress({ title : '提示', text : '数据处理中,请稍后....' }); var gridValid = endEdit();// 子表退出编辑验证 if

浅谈js ajax提交form表单的认识

学代码的时间也不短了,但是却很少使用ajax,后来特地去了解了一下,以下是作为初用ajax的新人对ajax的看法以及认识. Ajax,异步请求,通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 最近自己测试ajax提交form表单,表单提交有post和get两种使用更多的是post方法,虽然与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用.然而,在以下几种情况中,使用 POST 请求更为有效

EasyUI中实现form表单提交的示例分享_jquery

复制代码 代码如下:  $('#form').form({   url : 'test/add.do',   onSubmit : function() {    parent.$.messager.progress({     title : '提示',     text : '数据处理中,请稍后....'    });    var gridValid = endEdit();// 子表退出编辑验证    if (!gridValid) {     parent.$.messager.pro

火狐下table中创建form导致两个table之间出现空白的问题

在<FORM>中加CSS <table> ....... </table> <form style="padding:0; margin:0;"> <input name=""> </form> <table> ....... </table> 注意:在火狐中 <table> <form>.......</form> </tabl

火狐下table中创建form导致两个table之间出现空白_javascript技巧

在<FORM>中加CSS <table> ....... </table> <form style="padding:0; margin:0;"> <input name=""> </form> <table> ....... </table> 注意:在火狐中 <table> <form>.......</form> </tabl

javascript创建动态表单的方法_javascript技巧

本文实例讲述了javascript创建动态表单的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

基于jQuery通过jQuery.form.js插件使用ajax提交form表单_javascript技巧

我们在提交表单的时候,如果没有使用ajax提交,页面都会自己刷新一下,显得非常的不友好,所以我们需要把我们的表单提交修改为ajax的模式,可以让用户清楚地知道他们在提交表单的时候处在哪一个阶段:正在提交?提交成功? 我简单使用了一下,jQuery Form插件有一下优点: 1.支持提交前验证. 2.支持提交后回调. 3.采用AJAX方式,有很好的用户体验 4.提交方式是灵活.只要指定要提交的form ID即可.想提交那个form.就可提交那个.同时提交参数可配置. 5.支持提交多种类型数据.如: