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

前端JS页面例子：

mp.jsp

1. manipulationHistory.downloadData = function() {  
2.     //定义一个form表单  
3.     var myform = $("<form></form>");  
4.     myform.attr('method','post')  
5.     myform.attr('action',"/manipulationHistory/exportManipulationInfo");  
6.       
7.     var myProductId = $("<input type='hidden' name='productId' />")  
8.     myProductId.attr('value',$("#query-param-product-id").val());  
9.       
10.     var myPurchaseOrderId = $("<input type='hidden' name='purchaseOrderId' />")   
11.     myPurchaseOrderId.attr('value',$("#query-param-dispatched-po").val());  
12.       
13.     var myWarehouseId = $("<input type='hidden' name='warehouseId' />")   
14.     myWarehouseId.attr('value', $("#query-param-warehouse-id").val());  
15.       
16.     var myRelatedOrderId = $("<input type='hidden' name='relatedOrderId' />")   
17.     myRelatedOrderId.attr('value', $("#query-param-order-id").val());  
18.       
19.     var myUpdateReason = $("<input type='hidden' name='updateReason' />")   
20.     myUpdateReason.attr('value', $("#query-param-update-reason").val());  
21.       
22.     var myStartTime = $("<input type='hidden' name='startTime' />")   
23.     myStartTime.attr('value', $("#operate-time-start-value").val());  
24.       
25.     var myEndTime = $("<input type='hidden' name='endTime' />")   
26.     myEndTime.attr('value', $("#operate-time-end-value").val());  
27.       
28.     myform.append(myProductId);  
29.     myform.append(myPurchaseOrderId);   
30.     myform.append(myWarehouseId);   
31.     myform.append(myRelatedOrderId);   
32.     myform.append(myUpdateReason);   
33.     myform.append(myStartTime);   
34.     myform.append(myEndTime);  
35.     myform.appendTo('body').submit(); //must add this line for higher html spec       
36.    };  

如果你的浏览器报错：

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")

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

后台server端的java代码如下（基于SPring MVC的）

1. /* 
2.      * Ajax not support stream response message, so front page need to use form 
3.      * to submit request with APPLICATION_FORM_URLENCODED 
4.      */  
5.     @Consumes({ MediaType.APPLICATION_FORM_URLENCODED })  
6.     @RequestMapping(value = "/exportManipulationInfo", method = RequestMethod.POST)  
7.     @ResponseBody  
8.     public boolean exportManipulationInfo(HttpServletRequest request, HttpServletResponse response) {  
9.         ManipulationInfoQuery manipulationInfoQuery = generateMHQuery(request);  
10.         LOG.info("[IMS_INFO][exportManipulationInfo] received request: " + JsonHelper.toJson(manipulationInfoQuery));  
11.         List<ManipulationInfo> resultList = manipulationHistoryPageService.getManipulationInfoListWithoutPage(manipulationInfoQuery);  
12.         if (null == resultList || resultList.isEmpty()) {  
13.             LOG.info(" no data retrieved for query: " + JsonHelper.toJson(manipulationInfoQuery));  
14.         }  
15.         return downLoadsExcel(resultList, response);  
16.     }  
17.   
18.     private ManipulationInfoQuery generateMHQuery(HttpServletRequest request) {  
19.         ManipulationInfoQuery resultQuery = new ManipulationInfoQuery();  
20.         resultQuery.setProductId(request.getParameter("productId"));  
21.         resultQuery.setPurchaseOrderId(request.getParameter("purchaseOrderId"));  
22.         String warehouseID = request.getParameter("warehouseId");  
23.         if (StringUtils.isNotBlank(warehouseID)) {  
24.             resultQuery.setWarehouseId(Integer.parseInt(warehouseID));  
25.         } else {  
26.             resultQuery.setWarehouseId(null);  
27.         }  
28.         resultQuery.setRelatedOrderId(request.getParameter("relatedOrderId"));  
29.         resultQuery.setUpdateReason(request.getParameter("updateReason"));  
30.         resultQuery.setStartTime(request.getParameter("startTime"));  
31.         resultQuery.setEndTime(request.getParameter("endTime"));  
32.         resultQuery.setPageInd(null);  
33.         resultQuery.setPageSize(null);  
34.         return resultQuery;  
35.     }  
36.   
37.     private boolean downLoadsExcel(List<ManipulationInfo> dataList, HttpServletResponse response) {  
38.         FileOutputStream fos = null;  
39.         try {  
40.             HSSFWorkbook wb = new HSSFWorkbook();  
41.             HSSFSheet sheet = wb.createSheet("ManipulationInfo_details");  
42.             sheet.setDefaultColumnWidth(40);  
43.   
44.             HSSFCellStyle style = wb.createCellStyle();  
45.             style.setAlignment(HSSFCellStyle.ALIGN_LEFT);  
46.   
47.             String fileName = "ManipulationInfoData-" + String.valueOf(System.currentTimeMillis()).substring(4, 13) + ".xls";  
48.             fos = new FileOutputStream(fileName);  
49.   
50.             // column name  
51.             String[] label = { "index", "productId", "productName", "warehouseId", "warehouseName", "dispatchedPo", "relatedOrderId", "updateField", "action",  
52.                     "result", "updateReason", "operator", "operateTime" };  
53.   
54.             int columnNum = label.length;  
55.             // set title column at line 0  
56.             HSSFRow titleRow = sheet.createRow((int) 0);  
57.             // the most left column is index of column  
58.             HSSFCell titleCell = null;  
59.             for (int n = 0; n < columnNum; n++) {  
60.                 titleCell = titleRow.createCell(n);  
61.                 titleCell.setCellType(HSSFCell.CELL_TYPE_STRING);  
62.                 titleCell.setCellValue(label[n]);  
63.                 titleCell.setCellStyle(style);  
64.             }  
65.   
66.             if (null != dataList && !dataList.isEmpty()) {  
67.                 for (int rowIndex = 0; rowIndex < dataList.size(); rowIndex++) {  
68.                     ManipulationInfo item = dataList.get(rowIndex);  
69.                     /* 
70.                      * the line 0 is title line,so actual data line begins from 
71.                      * the next one line. 
72.                      */  
73.                     HSSFRow row = sheet.createRow(rowIndex + 1);  
74.                     String rowData[] = { item.getProductId(), item.getProductName(), item.getWarehouseId().toString(), item.getWarehouseName(),  
75.                             item.getDispatchedPo(), item.getRelatedOrderId(), item.getUpdateField(), item.getAction(), item.getResult().toString(),  
76.                             item.getUpdateReason(), item.getOperator(), item.getOperateTime() };  
77.   
78.                     // create the most left column as index column  
79.                     HSSFCell cell = row.createCell(0, HSSFCell.CELL_TYPE_NUMERIC);  
80.                     cell.setCellValue(rowIndex + 1);  
81.                     cell.setCellStyle(style);  
82.   
83.                     // create the remaining cells at the same line  
84.                     for (int columnIndex = 1; columnIndex < columnNum; columnIndex++) {  
85.                         cell = row.createCell(columnIndex, HSSFCell.CELL_TYPE_STRING);  
86.                         cell.setCellValue(rowData[columnIndex - 1]);  
87.                         cell.setCellStyle(style);  
88.                     }  
89.                 }  
90.             } else {  
91.                 LOG.info(" no data retrieved");  
92.             }  
93.   
94.             // set all columns to automatically adjust column width  
95.             for (int i = 0; i < columnNum; i++) {  
96.                 sheet.autoSizeColumn(i);  
97.             }  
98.   
99.             wb.write(fos); // write workbook into file .xls  
100.             fos.flush(); // flush buffer to file  
101.             fos.close(); // remember to close it  
102.             if (wb != null) {  
103.                 response.reset();  
104.                 response.setContentType("application/vnd.ms-excel");  
105.                 response.setHeader("Content-Disposition", "filename=" + new String(fileName.getBytes(), "iso-8859-1"));  
106.                 OutputStream out = response.getOutputStream();  
107.                 wb.write(out);  
108.                 out.flush();  
109.                 out.close();  
110.             }  
111.         } catch (Exception e) {  
112.             LOG.error( downLoadsExcel exception:" + e);  
113.             return false;  
114.         } finally {  
115.             if (fos != null) {  
116.                 try {  
117.                     fos.close();  
118.                 } catch (IOException e) {  
119.                     LOG.error(" close FileOutputStream error:" + e);  
120.                     return false;  
121.                 }  
122.             }  
123.         }  
124.   
125.         return true;  
126.     }