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

js中创建form表单相关推荐

js中实现form表单动态提交
最近遇到了调用某银行支付功能的需求需要使用form表单提交进行传参记录一下 //创建表单var form = document.createElement("form");// ...
html表单通过js提交表单提交,JavaScript动态创建form表单并提交的实现方法
本文实例讲述了JavaScript动态创建form表单并提交的实现方法.分享给大家供大家参考,具体如下: 页面布局有些复杂的情况下,可能需要在页面中动态创建一个 form,JavaScript 创建 ...
button layui 点击事件_解决layui中的form表单与button的点击事件冲突问题
解决layui中的form表单与button的点击事件冲突问题 layui的form表单位置和button标签的位置重合,会使得button的click事件得不到响应,如图: 蓝色底为form的位置, ...
在微信小程序中提交form表单
怎么在微信小程序中提交form表单发布时间:2021-04-07 16:26:31 来源:亿速云阅读:1229 作者:Leah 栏目:web开发活动:亿速云新用户活动,各类服务器大降价,满足绝大 ...
JS动态模拟Form表单提交数据
分享知识传递快乐 JS动态模拟Form表单提交数据 <!DOCTYPE html> <html lang="en"> <head><m ...
一创建form表单并实现后台数据的增删改查
思路:form表单创建,提交后上传用户信息到数据库,创建后台,可实现增删改查. 1 enroll.php <实现form表单的创建,并且可以提交到数据库中> <!DO ...
如何在WordPress中创建RSVP表单（简易）
Are you planning a big event like a birthday party, fundraiser, or even a wedding? Then you need an ...
HTML中的form表单有一个关键属性 enctype
HTML中的form表单有一个关键属性 enctype＝application/x-www-form-urlencoded 或multipart/form-data. 1.enctype=" ...
antd-vue中的form表单label标签for导致点击文字触发输入框解决方案
antd-vue中的form表单label标签for导致点击文字触发输入框解决方案参考文章: (1)antd-vue中的form表单label标签for导致点击文字触发输入框解决方案 (2)http ...

js中创建form表单

js中创建form表单相关推荐

最新文章

热门文章