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提交文件, 为了 ...
随机推荐
- fastText 安装
Windows: https://www.lfd.uci.edu/~gohlke/pythonlibs/#fasttext 下载需要的版本 然后:pip install 文件名
- WPF Style和Template
WPF中的Style类似于Web应用程序中的CSS,它是控件的一个属性,属于资源的一种. ControlTemplate和DataTemplate区别: ControlTemplate用于改变控件原来 ...
- php的数组变量
数组就是存储同一类型的多个变量的 一种特殊的类型 php的数组有两种形态 1.普通类型 eg:$cars = array("Volvo","BMW"," ...
- 安装Oracle需要调整的linux内核参数
在安装Oracle的时候需要调整linux的内核参数,但是各参数代表什么含义呢,下面做详细解析. Linux安装文档中给出的最小值: fs.aio-max-nr = 1048576 fs.file-m ...
- [PY3]——logging
logging模块的logger.handler.filter.formatter Logger记录器 提供日志接口,供应用代码使用.logger最长用的操作有两类:配置和发送日志消息.可以通过log ...
- [BZOJ 5072]小A的树
Description 题库链接 给你 \(n\) 个节点的一棵树,点分黑白. \(q\) 组询问,每次询问类似于"是否存在树中 \(x\) 个点的连通块恰有 \(y\) 个黑点" ...
- Vue双向绑定的关键：Object.defineProperty()
这个方法了不起啊.vue.js和avalon.js 都是通过它实现双向绑定的.而且Object.observe也被草案发起人撤回了.所以defineProperty更有必要了解一下了. 先上几行代码看 ...
- Python__random库基本介绍
random库是使用随机数的Python标准库 从概率论角度来说,随机数是随机产生的数据(比如抛硬币),但时计算机是不可能产生随机值,真正的随机数也是在特定条件下产生的确定值,只不过这些条件我们没有理 ...
- MFC数据库操作
本例采用Microsoft SQL2008建立的一个数据库表 /****链接数据库操作**/ 在stdafx.h的头文件中加入 #import "C:\Program Files\Commo ...
- 使用C#利用cmd来调用java jar包获取其中的数据
其实也很简单,就是在C#中构建一个Process,启动jar包,并且给jar包传递参数 因为我并没有怎么学过JAVA,所以只写了个很小的Demo,就是根据传入的参数获取对应的数据 以下是JAVA De ...