关于chrom56版本以后的form标签提交bug

最近遇到一个情况：

低版本的浏览器i运行如下代码：

 1     function query_mission(query_tag) {
 2         // 创建form表单
 3         var ip_list = getIpList()
 4         if (ip_list == false) {
 5             return false
 6         }
 7         form = $("<form></form>")
 8         form.attr('action', '/customer/query/mission_create/')
 9         form.attr('method','post')
10         form.attr('target','_blank')
11         object_ip = $("<input type='hidden' name='ip_list' />")
12         object_tag = $("<input type='hidden' name='query_tag' />")
13         object_ip.attr('value',JSON.stringify(ip_list))
14         object_tag.attr('value', query_tag)
15         form.append(object_ip)
16         form.append(object_tag)
17 18         form.submit()
19     }

 没问题  在高版本浏览器运行报如下错误： Form submission canceled because the form is not jquery-2.1.1.min.js:3 connected

 经查询，在chrom56版本以后不支持如上拼凑标签进行提交，需要加如下代码：

1 $(document.body).append(form);

 

问题原因：

在chrom56版本以后，chrom遵循html标准，html标准：如果提交如上form表单不是hmtl文档的标签，会终止提交，所以出现如上错误。在chrom56之前的版本不遵循html标准。详情参考如下：

Form submission algorithm

Chrome issue 2416033002

解决方法就是：

是文档中插入form表单：

1 $(document.body).append(form);

或者:

1 document.body.appendChild(form);

完整代码：

 1 function query_mission(query_tag) {
 2         // 创建form表单
 3         var ip_list = getIpList()
 4         if (ip_list == false) {
 5             return false
 6         }
 7         form = $("<form></form>")
 8         form.attr('action', '/customer/query/mission_create/')
 9         form.attr('method','post')
10         form.attr('target','_blank')
11         object_ip = $("<input type='hidden' name='ip_list' />")
12         object_tag = $("<input type='hidden' name='query_tag' />")
13         object_ip.attr('value',JSON.stringify(ip_list))
14         object_tag.attr('value', query_tag)
15         form.append(object_ip)
16         form.append(object_tag)
17         $(document).append(form);
18         form.submit()
19     }

 

posted @ 2017-05-22 10:44  evil_liu  阅读(321)  评论(0)  编辑  收藏  举报