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提交文件, 为了 ...
随机推荐
- ms-sql 给表列添加注释
需求: 在创建数据库是对相应的数据库.表.字段给出注释. 解决方案: 首先,要明确一点的是注释存在sysproperties表中而不是跟创建的表捆绑到一起的(我的理解). 一.使用SQL Server ...
- 开发工具 -- PyDev 在 Eclipse中的安装
1. 将从sorceforge下载到的PyDev3.4.1解压后放到eclipse的插件目录下F:\APP\IDE\Java\Eclipse\eclipse-java-kepler-SR2-win32 ...
- java 实现 HTTP请求（GET、POST）的方法
使用Java进行服务调用时,避免不了要使用模拟HTTP请求来实现模拟,我在开发过程中恰巧遇到了这类的业务需求,所以就对这类的方法进行了一次总结,原理层次的东西暂时不考虑,毕竟HTTP的底层实现啥的,东 ...
- Linux用户权限规范 /etc/sudoers文件解释
# User privilege specification root ALL=(ALL) ALL # Members of the admin group may gain root privile ...
- xgboost使用
xgboost的实现方式为多颗CART树,其实xgboost就是类似于随机森林,但是与随机森林不同,他不是多个子树决策的结果,CART树最后会算出一个得分,是一个值,最后算出分类的时候,是多个值结合在 ...
- alloca() 是什么？为什么不提倡使用它？
在调用 alloca() 的函数返回的时候, 它分配的内存会自动释放.也就是说, 用 alloca 分配的内存在某种程度上局部于函数的 ``堆栈帧" 或上下文中. alloca() 不具可 ...
- XRP节点部署
目录 XRP节点部署 准备 硬软件配置(建议) 安装Rippled服务 一. 以Stock Server模型运行 在何种情况下运行此模式 二 .以 Validator模式运行 在何种情况下运行此模式 ...
- 学习angualr之前需要了解的typeScript知识
官网 : www.typescriptlang.org 1.编译型语言 2.强类型语言 3.真正的面向对象的语言: 有借口.有泛型.有枚举.有访问修饰符 AMD类型的面向对象的语言 npm ...
- *** Terminating app due to uncaught exception 'NSUnknownKeyException', reason: '[<WKWebViewConfiguration 0x1701bcd20> setValue:forUndefinedKey:]: this class is not key value coding-compliant for the k
问题描述: ionic项目,windows下正常,打包android可正常运行: 因为需要打包到iPhone (ios 11.0.1)上测试,将代码拿到Mac OS环境下(重新npm install. ...
- 【转】Cookie深度解析
Cookie简介 众所周知,Web协议(也就是HTTP)是一个无状态的协议(HTTP1.0).一个Web应用由很多个Web页面组成,每个页面都有唯一的URL来定义.用户在浏览器的地址栏输入页面的URL ...