jquery 动态生成form提交数据的例子，及其 form is not connected 错误解决

最新推荐文章于 2022-03-28 21:05:42 发布

北漂的Leo君

最新推荐文章于 2022-03-28 21:05:42 发布

阅读量405

点赞数

分类专栏：前端

前端专栏收录该内容

6 篇文章

订阅专栏

原贴：https://blog.youkuaiyun.com/bigtree_3721/article/details/71633273

jquery 动态生成form提交数据的例子，及其 form is not connected 错误解决

2017年05月11日 16:28:38

阅读数：1383

前端JS页面例子：

mp.jsp

 
   
 
  
manipulationHistory.downloadData = function() {  
    //定义一个form表单  
    var myform = $("<form></form>");  
    myform.attr('method','post')  
    myform.attr('action',"/manipulationHistory/exportManipulationInfo");  
      
    var myProductId = $("<input type='hidden' name='productId' />")  
    myProductId.attr('value',$("#query-param-product-id").val());  
      
    var myPurchaseOrderId = $("<input type='hidden' name='purchaseOrderId' />")   
    myPurchaseOrderId.attr('value',$("#query-param-dispatched-po").val());  
      
    var myWarehouseId = $("<input type='hidden' name='warehouseId' />")   
    myWarehouseId.attr('value', $("#query-param-warehouse-id").val());  
      
    var myRelatedOrderId = $("<input type='hidden' name='relatedOrderId' />")   
    myRelatedOrderId.attr('value', $("#query-param-order-id").val());  
      
    var myUpdateReason = $("<input type='hidden' name='updateReason' />")   
    myUpdateReason.attr('value', $("#query-param-update-reason").val());  
      
    var myStartTime = $("<input type='hidden' name='startTime' />")   
    myStartTime.attr('value', $("#operate-time-start-value").val());  
      
    var myEndTime = $("<input type='hidden' name='endTime' />")   
    myEndTime.attr('value', $("#operate-time-end-value").val());  
      
    myform.append(myProductId);  
    myform.append(myPurchaseOrderId);   
    myform.append(myWarehouseId);   
    myform.append(myRelatedOrderId);   
    myform.append(myUpdateReason);   
    myform.append(myStartTime);   
    myform.append(myEndTime);  
    myform.appendTo('body').submit(); //must add this line for higher html spec       
   };  

如果你的浏览器报错：

submission canceled because the form is not connected ,

则要加入上面的这行

myform.appendTo('body').submit();

或者用下面的代码也是一样的。

$("body").append(myform);
myform.submit();

说一下上面的含义：

$("body") 是一个选择器，jQuery 会从 DOM 顶端开始搜索，直到找到标签为 body 的元素。

而 $(document.body) 中的 document.body 已经是一个 DOM 对象，jQuery 可以直接使用此元素。

所以它们的区别在于效率，$(document.body) 高于 $("body")

但一般情况下在普通单页面是体现不出来的。