jQuery使用动态渲染表单功能完成ajax文件下载

代码如下:

// Ajax 文件下载
jQuery.download = function(url, data, method){
// 获取url和data
if( url && data ){
// data 是 string 或者 array/object
data = typeof data == 'string' ? data : jQuery.param(data);
// 把参数组装成 form的 input
var inputs = '';
jQuery.each(data.split('&'), function(){
var pair = this.split('=');
inputs+='<input type="hidden" name="'+ pair[0] +'" value="'+ pair[1] +'" />';
});
// request发送请求
jQuery('<form action="'+ url +'" method="'+ (method||'post') +'">'+inputs+'</form>')
.appendTo('body').submit().remove();
};
};

***也就是动态渲染表单，提交表单后再删除。***

调用实例


代码如下:

$.download('ExcelDownload.do','find=commoncode','post' );

赞 (0)

相关推荐

  • Ajax实现文件下载

    JQuery的ajax函数的返回类型只有xml.text.json.html等类型,没有"流"类型,所以我们要实现ajax下载,不能够使用相应的ajax函数进行文件下载.但可以用js生成一个form,用这个form提交参数,并返回"流"类型的数据.在实现过程中,页面也没有进行刷新. 1. 使用ajax,ajax的返回值类型是json,text,html,xml类型,或者可以说ajax的发送,接受都只能是string字符串,不能流类型,所以无法实现文件下载,强用会出现

  • Ajax 生成流文件下载(实现代码)

    复制代码 代码如下: // 绑定导出按钮    $("#btnExport").clickCheckLogin(function () { var form = $("<form>");        form.attr('style', 'display:none');        form.attr('target', '');        form.attr('method', 'post');        form.attr('action

  • Jquery Ajax请求文件下载操作失败的原因分析及解决办法

    Jquery Ajax请求文件下载操作失败的原因分析及解决办法

    jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来分析一下失败的原因 一.失败的原因 那是因为response原因,一般请求浏览器是会处理服务器输出的response,例如生成png.文件下载等,然而ajax请求只是个"字符型"的请求,即请求的内容是以文本类型存放的.文件的下载是以二进制形式进行的,虽然可以读取到返回的response,但只是读取而已,是无法执行的,说白

  • 利用 FormData 对象和 Spring MVC 配合实现Ajax文件下载功能

    Ajax文件下载 利用 FormData 对象和 Spring MVC 配合可以实现Ajax文件上载功能: 步骤 1.导入组件并准备静态脚本 <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.2</version> </dependency> &l

  • JQuery的AJAX实现文件下载的小例子

    复制代码 代码如下: var form=$("<form>");//定义一个form表单form.attr("style","display:none");form.attr("target","");form.attr("method","post");form.attr("action","exportData"

  • jQuery使用动态渲染表单功能完成ajax文件下载

    复制代码 代码如下: // Ajax 文件下载 jQuery.download = function(url, data, method){ // 获取url和data if( url && data ){ // data 是 string 或者 array/object data = typeof data == 'string' ? data : jQuery.param(data); // 把参数组装成 form的 input var inputs = ''; jQuery.each

  • springboot vue接口测试前端动态增删表单功能实现

    springboot vue接口测试前端动态增删表单功能实现

    目录 基于 springboot+vue 的测试平台开发 页面实现 1. 基础信息部分 2. 请求参数部分 3. 响应内容部分 基于 springboot+vue 的测试平台开发 继续更新 目前已经进入到接口定义功能的开发阶段,首先我还是直接在前段画了个大概的页面,先预览下: 不过目前只是画了这个页面都主要功能,细节未尽事宜待具体开发的时候再进一步完善. 从上面动态图上已经显示了大概情况,主要是创建接口的功能,其中还支持发送调试.发送请求的功能就直接参考 postman,用起来习惯. 页面实现

  • jQuery基于Ajax方式提交表单功能示例

    本文实例讲述了jQuery基于Ajax方式提交表单功能.分享给大家供大家参考,具体如下: 提交表单一般通过同步的方式提交,提交后页面刷新或跳转到新页面来显示服务器端返回的处理结果.如果表单提交后有另外的操作或业务需求需要还在这个页面上显示或处理,那么页面不能整体刷新,这时第一想到的就是采用ajax的方式提交表单.下面完整的介绍一个表单采用ajax方式提交的流程. 一.准备 1.页面引入jQuery文件 2.页面引入jQuery的表单插件jQuery.form.js 二.实施 1.页面中的表单 <

  • jQuery实现动态表单验证时文本框抖动效果完整实例

    jQuery实现动态表单验证时文本框抖动效果完整实例

    本文实例讲述了jQuery实现动态表单验证时文本框抖动效果.分享给大家供大家参考.具体如下: 这里使用jQuery实现的动态表单验证特效,当用户输入错误或没有输入的时候点击提交按钮,有问题的输入框会抖动几下,以提示用户此项有问题,文本框抖动功能都有意思,这个表单比较典型,想实现jquery Ajax表单功能的可以参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-table-txt-check-shake-style-codes

  • jquery validate和jquery form 插件组合实现验证表单后AJAX提交

    要实现表单验证和无刷新提交表单我们可以使用jQuery的两个很好用的插件--jquery validate.js 和 jquery form.js.具体详细说明情况下文. 1.jQuery validate.js,它说白了就是一个很高尚的人为我们写好了各种表单的验证,不用我们这些童鞋去现写了,一天天的多累啊,呵呵. 2.jQuery form.js,"这个插件能够让你简洁的将以HTML形式提交的表单升级成采用AJAX技术提交的表单. 插件里面主要的方法, ajaxForm 和 ajaxSubmi

  • jQuery实现form表单基于ajax无刷新提交方法详解

    本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.o

  • Vue+ElementUI实现表单动态渲染、可视化配置的方法

    动态渲染就是有一个异步的数据,大概长这样: { "inline": true, "labelPosition": "right", "labelWidth": "", "size": "small", "statusIcon": true, "formItemList": [ { "type": "

  • jQuery中使用validate插件校验表单功能

    一.功能效果 二.部分特殊规则 2.1 错误信息位置更改 在表单某选项中增加代码 <label class="error" for="表单中选项的name"></label> 例如 : 性别必选 <td> <input type="radio" id="male" value="m" name="sex"/>男 <input type

  • jQuery实现form表单基于ajax无刷新提交方法实例代码

    本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.o

  • vue element动态渲染、移除表单并添加验证的实现

    又接到新需求了吧~~ 背景 在一个大表单里,有可能会出现这种需求,用户可以自己操作动态添加.移除表单,更加个性化的效果. 常见于填写个人信息.附加内容的表单 例如: "工作经历"可以用户自己点击继续添加按钮,在原有的表单后面 append 多一个表单,不需要就点击右上方 X 按钮移除 问题 在实现之前,提出几个问题 vue 怎么动态渲染或移除表单上去 v-model 怎么绑定动态添加表单的 value 值 动态新增的表单如何验证 动态表单怎么填写对应的 prop ... 好吧,我当时也

随机推荐