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提交文件, 为了 ...
随机推荐
- Python -- Gui编程 -- MFC的使用
1.消息框 mfcDialog.py import win32ui import win32con from pywin.mfc import dialog class MyDialog(dialog ...
- 数据库报错com.mysql.jdbc.MysqlDataTruncation: Data truncation: Data too long for column 'ua' at row 1
记一次报错记录,成长路上的点滴 明明使用浏览器或者微信开发工具调试接口没有问题,但是在真机测试时候就出问题了.(((¬_¬)) 500服务器内部错误,要死的节奏啊 登陆tomcat服务器 使用命令ta ...
- MySQL Optimization 优化原理
MySQL Optimization 优化原理 MySQL逻辑架构 如果能在头脑中构建一幅MySQL各组件之间如何协同工作的架构图,有助于深入理解MySQL服务器.下图展示了MySQL的逻辑架构图. ...
- kibana-1-安装
由于es5.2版本对head的插件支持不如2.4 安装挺麻烦, 于是选用kibana 关于5.2安装head插件可见这个博客 http://www.cnblogs.com/xing901022/p/6 ...
- elasticsearch插件安装之--linux下安装及head插件
/** * 系统环境: vm12 下的centos 7.2 * 当前安装版本: elasticsearch-2.4.0.tar.gz */ 安装和学习可参照官方文档: 1, 安装 # 下载, 获取不成 ...
- Integer.parseInt() 和 valueOf()
parseInt("1")返回的是int类型,所以如果想要将一个String类型的数字串转为原始类型int ,建议使用这个方法, 而不是使用 valueOf("1&quo ...
- NoSQL之HBase
http://www.cnblogs.com/LBSer/p/3330383.html 9月初淘宝飞芃做了一个关于HBase的分享,讲的激情飞扬,让听众收益匪浅,现做下简单总结. HBase是一个No ...
- echarts 雷达图的个性化设置
echarts 雷达图的个性化设置 function test() { let myChart = echarts.init(document.getElementById('levelImage') ...
- button按钮被输入法顶起来，遮盖了input输入框
在做手机端的表单提交的时候,在chrome浏览器调试的时候,忘记输入法会引起布局的问题.在webApp里input输入框,会自动调起输入法,但是输入法会改变浏览器的可视区域的大小.就是会把浏览器可视区 ...
- layer 中的 layer.alert layer.msg layer.confirm
1.layer.alert layer.alert('见到你真的很高兴', {icon: 6}); 效果图 layer.alert('墨绿风格,点击确认看深蓝', { skin: 'layui-lay ...