Jquery组织Form表单提交之Form submission canceled because the form is not connected
有时候导出Excel时需要根据某些条件筛选数据，然后将数据通过NPOI生成Excel并导出。组织数据时可以通过放到一个表单中，某些场景是使用脚本(如：jquery)组织一个form(通过字符串拼接)，然后将这个from的转换成jquery对象或者Dom对象，再调用对应的submit方法。
例子如下，有一个html页面
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<input type="button" value="导出Excel" id="btnExport" />
<script src="Scripts/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnExport").click(function () {
var formHtml = "<form action='DownLoadHandler.ashx' method='post' target='_blank'>";
formHtml += "<input type='hidden' name='username' value='admin' />";
formHtml += "<input type='hidden' name='password' value='abc' />";
formHtml += "</form>";
$(formHtml).submit();
});
});
</script>
</body>
</html>
这里是ASP.NET web应用程序，有一个一般处理程序，它通过判断筛选条件（这里是用户名和密码，实际当中可能是某些查询条件，用户向数据库查询数据等），然后导出Excel
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web; namespace WebApplication1
{
/// <summary>
/// DownLoadHandler 的摘要说明
/// </summary>
public class DownLoadHandler : IHttpHandler
{ public void ProcessRequest(HttpContext context)
{
if (context.Request.Form["username"] == "admin" && context.Request.Form["password"] == "abc")
{
context.Response.ContentType = "application/octet-stream";
context.Response.AddHeader("Content-Disposition", "attachment;filename=persons.xlsx");
byte[] bytes = File.ReadAllBytes(context.Server.MapPath("~/SysFolder/Persons.xlsx"));
context.Response.BinaryWrite(bytes);
}
else
{
context.Response.ContentType = "text/plain";
context.Response.Write("没有找到数据，导出excel失败");
}
} public bool IsReusable
{
get
{
return false;
}
}
}
}
通过浏览器浏览，点击按钮发现没有提交表单，网络监视里没有发出请求
查看开发人员工具中的控制台，发现提示Form submission canceled because the form is not connected
该问题需要将组织的form追加到文档的body中，然后再提交，于是修改代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<input type="button" value="导出Excel" id="btnExport" />
<script src="Scripts/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnExport").click(function () {
var formHtml = "<form action='DownLoadHandler.ashx' method='post' target='_blank'>";
formHtml += "<input type='hidden' name='username' value='admin' />";
formHtml += "<input type='hidden' name='password' value='abc' />";
formHtml += "</form>";
var form = $(formHtml);
$(document.body).append(form);
form.submit();
});
});
</script>
</body>
</html>
刷新页面，再次提交，发现正常
参考链接：https://stackoverflow.com/questions/42053775/getting-error-form-submission-canceled-because-the-form-is-not-connected
Jquery组织Form表单提交之Form submission canceled because the form is not connected的更多相关文章
- jQuery Form 表单提交插件-----formSerialize，fieldSerialize，fieldValue，resetForm，clearForm，clearFields的 应用
一.jQuery Form的其他api 1. formSerialize 将表单序列化成查询串.这个方法将返回一个形如: name1=value1&name2=value2的字符串.是否可 ...
- jQuery Form 表单提交插件----Form 简介，官方文档，官方下载地址
一.jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxF ...
- Checkbox框全选操作，form表单提交与jquery ajax提交两种处理方式
//1.jquery ajax<script type="text/javascript"> $(function(){ var basePath = $(" ...
- Jquery来对form表单提交（mvc方案）
来自:http://www.cnblogs.com/lmfeng/archive/2011/06/18/2084325.html 我先说明一下,这是asp.net mvc 里面的用法, Jquery来 ...
- jQuery判断 form表单提交时一些文本框的判断
一: form表单提交时如果表单里有input标签为空那么不提交form表单. <head> <script type="text/javascript"> ...
- jQuery补充之jQuery扩展/form表单提交/滚动菜单
jQuery扩展 为了避免重复造轮子,能高效使用别人的代码,所以有了扩展. jQuery扩展有两种方式: 自执行函数方式 定义函数,并执行函数. 自执行函数: (function(jq){ jq.ex ...
- 通过jquery实现form表单提交后不跳转页面，保留当前页面
jquery代码: <script type="text/javascript" src="../js/jquery-1.8.3.min.js">& ...
- jquery模拟form表单提交并新打开页面
/** * form表单提交本页面打开 * @param url * @param params */ function postCurrent(url,params){ var form = $(& ...
- 怎么实现form表单提交后不重新刷新当前页面
怎么实现表单提交后不重新刷新当前页面 如何实现表单提交后不重新刷新当前页面 <form name='form1' id='form1' action='/xbcw/cw/xx_xx.ac ...
- ajax form表单提交 input file中的文件
ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了 ...
随机推荐
- Javac语法糖之增强for循环
加强的for循环有两种,遍历数组和实现了Iterable接口的容器.javac通过visitForeachLoop()方法来实现解语法糖,代码如下: /** Translate away the fo ...
- C语言理论知识
C语言-----理论部分 一:软件开发概述1.程序语言的发展:机器语言-->汇编语言-->高级语言.2.软件开发的基本步骤与方法:分析问题,建立数学模型-->确定数据结构和算法- ...
- [转]AngularJS中$timeout和$interval的用法详解
本文转自:http://www.cnblogs.com/moli-/p/5827618.html 1. 先将$interval,$timeout,作为参数注入到controller中,例如rds.co ...
- WCF异常信息
1.服务“CJ.Demo.Conso.WcfService.EmployeeMngService”有零个应用程序(非基础结构)终结点.这可能是因为未找到应用程序的配置文件,或者在配置文件中未找到与服务 ...
- 解决Tomcat出现内存溢出的问题
Tomcat服务器出现java.lang.OutOfMemoryError:Java heap space异常 1.可能是程序错误,比如:程序陷入死循环 2.堆内存太小 一般情况下,java创建的对象 ...
- if 和case
select case 'O' when 'O' then (1*5-6) when 'C' then (1*5-6) when 'EC' then (1*5-6) --else null --end ...
- 【手记】解决VS2010宏功能报错
抱歉问题解决前没留截图,总之就是使用宏相关的功能都打不开,会弹窗报错,英文,大意是[一个或多个组件不存在,请尝试重装]. 尝试过: 修复安装VS2010 按此文照做:https://visualstu ...
- 什么是memcached？
缓存是一种常驻与内存的内存数据库,内存的读取速度远远快于程序在磁盘读取数据的速度.我们在设计程序的时候常常会考虑使用缓存,将经常访问的数据放到内存上面这样可以提高访问数据的速度,同时可以降低磁盘或数据 ...
- VisualVM监控远程阿里云主机
一.前言 使用VisualVM监控远程主机,主要是要在远程主机上部署JMX服务和jstat服务,jstat服务的部署花了我半天的时间,而且,网上的资基本都是缺胳膊少腿的,没有一篇是一个整体(行得通的) ...
- nginx+tomcat实现Windows系统下的负载均衡搭建的案例
刚入行没多久就听过‘负载均衡’的大名,到现在因为工作接触的少,所以没什么太多的认识.但自己又对其非常的好奇,所以前两天通过查资料,在自己的笔记本上就搭建了一个超简单的案例(工作中没有时间,晚上到家了条 ...