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

时间：2022-11-28 16:59:43

前端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.     }  
标签：

相关文章