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提交文件, 为了 ...
随机推荐
- 安装freepbx后创建sip分机
在前面的文章阿里云使用镜像安装freepbx里面我们已经使用镜像文件安装好了freepbx,接下来开始是开始创建SIP分机,实现可以拨打电话. 首先我们输入我们的IP可以直接访问到freepbx的界面 ...
- [转] Ubuntu 14.04/14.10下安装VMware Workstation 11图文教程
点击这里查看原文 译者:GuiltyMan 本文由 Linux公社翻译组 原创翻译 Linux公社 诚意奉献 更多请访问此处博客网站 VMware workstation 是一个可以进行桌面操作的虚 ...
- java.lang.ArithmeticException: Rounding necessary
这个错误就是精度丢失问题 https://blog.csdn.net/qq496013218/article/details/70792655
- 深入理解Java虚拟机：垃圾收集器与内存分配策略
目录 3.2 对象已死吗 判断一个对象是否可被回收 引用类型 finalize() 回收方法区 3.3. 垃圾收集算法 1.Mark-Sweep(标记-清除)算法 2.Copying(复制)算法 3. ...
- Kafka消息重新发送
Kafka消息重新发送 1. 使用kafka消息队列做消息的发布.订阅,如果consumer端消费出问题,导致数据并没有消费,此时不需要担心,数据并不会立刻丢失,kafka会把数据在服务器的磁盘 ...
- Kafka安装kafka-manager
1 .下载kafka-manager 想要查看和管理Kafka,完全使用命令并不方便,我们可以使用雅虎开源的Kafka-manager,GitHub地址如下: https://github.com/y ...
- Node.js之HTTP请求与响应
在C#.OC中也是客户端发起一个请求,服务端作出响应.我们可以把这个过程抽象理解 . 1.客户端给服务端发起请求相当于向服务端写入一个流(writable) 2.服务端读取客户端的流(readable ...
- Linux的虚拟内存管理-如何分配和释放内存，以提高服务器在高并发情况下的性能，从而降低了系统的负载
Linux的虚拟内存管理有几个关键概念: Linux 虚拟地址空间如何分布?malloc和free是如何分配和释放内存?如何查看堆内内存的碎片情况?既然堆内内存brk和sbrk不能直接释放,为什么不全 ...
- win10 系统下MyEclipse用SVN之后想切换用户的解决方法
1.在svn 创建了两类账户,分别是管理员 和 开发人员. 2.代码同步到Myecclipse .使用的是 admin 管理员账户checkout. 3.提交代码的时候想用开发者账户user提交,发现 ...
- 网络编程: 基于TCP协议的socket, 实现一对一, 一对多通信
TCP协议 面向连接 可靠的 面向字节流形式的 tcp是基于链接的,必须先启动服务端,然后再启动客户端去链接服务端 TCP协议编码流程: 服务器端: 客户端 实例化对 ...