AJAX文件下载

JQuery的ajax函数的返回类型只有xml、text、json、html等类型,没有“流”类型,所以我们要实现ajax下载,不能够使用相应的ajax函数进行文件下载。但可以用js生成一个form,用这个form提交参数,并返回“流”类型的数据。在实现过程中,页面也没有进行刷新。


注意此示例采用STRUTS2实现,没有采用Struts2内置的文件下载方法。

JS代码如下:

<script type="text/javascript">  
 
    function aClick () {
    	$.ajax({  
            type : "POST",//提交方式  
            url : "${pageContext.request.contextpath}/ajaxTest.action",//路径  
            data : {  
                id: 1,name:"testtt"
            },//数据,这里使用的是Json格式进行传输  
            success : function(result) {//返回数据根据结果进行相应的处理  
            	var form=$("<form>");//定义一个form表单
            	form.attr("style","display:none");
            	form.attr("target","");
            	form.attr("method","post");
            	form.attr("action","downloadTest.action");
            	var input1=$("<input>");
            	input1.attr("type","hidden");
            	input1.attr("name","exportData");
            	input1.attr("value",(new Date()).getMilliseconds());
            	$("body").append(form);//将表单放置在web中
            	form.append(input1);
            	form.submit();//表单提交 
            }  
        });
    }  
</script>

下图有两个超链接,第一个是通过AJAX调用下载ACTION的,第二个直接就是超链接调用ACTION 。

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src='full/jquery.min.js'></script>
<title>Insert title here</title>
<script type="text/javascript">  
 
    function aClick () {
    	$.ajax({  
            type : "POST","ajaxTest.action");
            	var input1=$("<input>");
            	input1.attr("type",(new Date()).getMilliseconds());
            	$("body").append(form);//将表单放置在web中
            	form.append(input1);
            	form.submit();//表单提交 
            }  
        });
    }  
</script>
</head>
<body>

	<br />

	<h2>点击下载</h2>
 
	<a href="javascript:void(0)" onclick="aClick()">文件下载</a>

	<a href="ajaxTest.action?fileName=FCN301-Ver.1.1費用申請書.xls">文件下载(超链接)</a>

</body>
</html>

ACTION类如下:(此ACTION类中也有一个下载的方法,都是共通的)

/**
* com.ppl.action.excelDol.java
* @author 作者 : pplsunny
* @version 创建时间:2017年4月8日 下午8:26:39
* 类说明
*/

package com.ppl.action;

import java.io.BufferedInputStream;
import java.io.bufferedoutputstream;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;

import com.opensymphony.xwork2.ActionSupport;
import com.ppl.test.WorkbookDemo;

/**
*  XXXX
*/
public class excelDol extends ActionSupport {

	public String execute() throws Exception {
		
		String filePath="G:/POI_JAVA/FCN301-Ver.1.1費用申請書.xls";
        
        //下载到客户端
        HttpServletResponse response = ServletActionContext.getResponse();
        //download(filePath,response);
        WorkbookDemo.readTempleteExcel(filePath,response);
        
		//1 获取表单数据
		HttpServletRequest request = ServletActionContext.getRequest();
		String id = request.getParameter("id");
		String name = request.getParameter("name");
		System.out.println(id+"--"+name);
		return NONE;
	}
	
	private void download(String path,HttpServletResponse response) {  
        try {  
            // path是指欲下载的文件的路径。  
            File file = new File(path);  
            // 取得文件名。  
            String filename = file.getName(); 
            String strName = new String(filename.getBytes("UTF-8"),"ISO-8859-1");  
            // 以流的形式下载文件。  
            InputStream fis = new BufferedInputStream(new FileInputStream(path));  
            byte[] buffer = new byte[fis.available()];  
            fis.read(buffer);  
            fis.close();  
            // 清空response  
            response.reset();  
            // 设置response的Header  
            response.addheader("Content-disposition","attachment;filename="  
                    + new String(filename.getBytes("UTF-8"),"ISO-8859-1"));  
            response.addheader("Content-Length","" + file.length());  
            OutputStream toClient = new bufferedoutputstream(  
                    response.getoutputStream());  
            response.setContentType("application/vnd.ms-excel;charset=gb2312");  
            toClient.write(buffer);  
            toClient.flush();  
            toClient.close();  
        } catch (IOException ex) {  
            ex.printstacktrace();  
        }  
    }  

}

EXCEL文件操作类

package com.ppl.test;

import java.io.BufferedInputStream;
import java.io.bufferedoutputstream;
import java.io.ByteArrayInputStream;
import java.io.ByteArrayOutputStream;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.net.URLEncoder;
import java.text.DecimalFormat;
import java.text.SimpleDateFormat;
import java.util.Calendar;
import java.util.Date;
import java.util.Iterator;

import javax.servlet.http.HttpServletResponse;

import org.apache.poi.hssf.usermodel.hssfCell;
import org.apache.poi.hssf.usermodel.hssfDateUtil;
import org.apache.poi.hssf.usermodel.hssfRow;
import org.apache.poi.hssf.usermodel.hssfSheet;
import org.apache.poi.hssf.usermodel.hssfWorkbook;
import org.apache.poi.poifs.filesystem.POIFSFileSystem;
import org.apache.poi.ss.usermodel.Cell;
import org.apache.poi.ss.usermodel.CellStyle;
import org.apache.poi.ss.usermodel.CreationHelper;
import org.apache.poi.ss.usermodel.Row;
import org.apache.poi.ss.usermodel.Sheet;
import org.apache.poi.ss.usermodel.Workbook;
import org.apache.poi.ss.usermodel.WorkbookFactory;
import org.apache.poi.ss.util.WorkbookUtil;

public class WorkbookDemo {

	/**
	 * 创建工作簿
	 * @throws IOException
	 */
	public static void createWorkBook() throws IOException {

		/**
		 * 工作薄:  WorkBook是操作Excel的入口,Excel的文档对象,hssfWorkbook(2003版本 ),XSSFWorkbook(2007版本)实现了该接口。
		 *  hssf对应xls格式,XSSF对应xlsx格式
		 * ------------------------------------------------------------------
		 * Workbook wb = new XSSFWorkbook();
		 * FileOutputStream fileOut = new FileOutputStream("workbook.xlsx");
		 * wb.write(fileOut);
		 * fileOut.close();
		 * ------------------------------------------------------------------
		 */
		final Workbook hssfwb = new hssfWorkbook();

		/**
		 * Sheet是在org.apache.poi.ss.usermodel包的接口,它是创建具有特定名称的高或低级别的电子表格的所有类的超接口。
		 * 页:Sheet表示工作薄的分页。hssfSheet, XSSFChartSheet,XSSFDialogsheet,XSSFSheet实现了该接口。
		 * 索引以0开始,以workbook.getNumberOfSheets()-1结束
		 */
		final String safeName = WorkbookUtil.createSafeSheetName("first sheet");
		final Sheet sheet = hssfwb.createSheet(safeName);

		//sheet.autoSizeColumn(6,true);

		/**
		 * 获取工作簿数量
		 */
		final int sheetCount = hssfwb.getNumberOfSheets();
		System.out.println("sheetCount: " + sheetCount);

		/**
		 * Row:表示页中的一行。hssfRow,XSSFRow实现了该接口。
		 * Row的索引以0开始(getFirstRowNum),以getLastRowNum结束
		 */
		final Row row = sheet.createRow((short) 0);

		/**
		 * 得到的是最后一个不为空的行索引,真实行号是【getLastRowNum()+1】
		 */
		final int rowNumReal = sheet.getLastRowNum();

		/**
		 * Cell:行中的一个单元格。hssfCell,XSSFCell实现了该接口。
		 * Cell的索引以0开始(getFirstCellNum),以getLastCellNum结束,*/
		final Cell cell = row.createCell(0);

		/**
		 * 获取当前行中不为空的单元格数
		 */
		final int cellNumReal = row.getPhysicalNumberOfCells();

		/**
		 * 空单元格返回对应的单元格类型
		 */
		Cell cell2 = row.getCell(3,Row.MissingCellPolicy.CREATE_NULL_AS_BLANK);
		cell2 = row.getCell(4,Row.MissingCellPolicy.RETURN_BLANK_AS_NULL);
		cell2 = row.getCell(5,Row.MissingCellPolicy.RETURN_NULL_AND_BLANK);

		//设置单元格的数据
		cell.setCellValue(1);

		// Or do it on one line. 
		row.createCell(1).setCellValue(1.2);
		row.createCell(2).setCellValue("This is a string 速度反馈链接");
		row.createCell(3).setCellValue(true);

		//----------------------单元格赋值示例START------------------------------------------
		/**
		 * 创建第十行
		 */
		final Row rowTEN = sheet.createRow((short) 9);

		// 填充日期类型的数据---未设置Cell Style 
		rowTEN.createCell(1).setCellValue(new Date());
		// 另一种创建日期的方法
		rowTEN.createCell(2).setCellValue(Calendar.getInstance());

		/**
		 * 在第十行的单元格上创建单元格
		 */
		final Cell cellOther = rowTEN.createCell(5);
		cellOther.setCellValue(new Date());

		/**
		 *  获取hssf的辅助类
		 */
		final CreationHelper createHelper = hssfwb.getCreationHelper();

		final CellStyle cellStyle = hssfwb.createCellStyle();

		// 填充日期类型的数据---已设置Cell Style
		final String timeFormat = "yyyy-MM-dd hh:mm:ss";
		cellStyle.setDataFormat(createHelper.createDataFormat().getFormat(timeFormat));
		final Cell cell7 = rowTEN.createCell(6);
		cell7.setCellValue(new Date());
		cell7.setCellStyle(cellStyle);

		/**
		 * 设置单元格宽度自适应,对中文支持不好
		 */
		sheet.autoSizeColumn((short) 6);

		//----------------------单元格赋值示例END------------------------------------------
		/**
		 * 创建一个文件 命名为workbook.xls,默认创建到当前工程的根目录下
		 */
		final FileOutputStream fileOut = new FileOutputStream("workbook2.xls");

		/**
		 * 把上面创建的工作簿输出到文件中 
		 */
		hssfwb.write(fileOut);

		/**
		 * 关闭输出流 
		 */
		fileOut.close();
		hssfwb.close();

	}

	/**
	 * 使用POI读入excel工作簿文件 
	 * @throws Exception
	 */
	public static void readWorkBook() throws Exception {

		/**
		 * 从文件流读取Excel
		 */
		final InputStream inp = new FileInputStream("workbook1.xls");

		/**
		 * 根据上述创建的输入流 创建工作簿对象 
		 */
		final Workbook wb = WorkbookFactory.create(inp);

		/**
		 * 页Sheet是从0开始索引的 
		 */
		final Sheet sheet = wb.getSheetAt(0);

		/**
		 * 按名引用excel工作表
		 * Sheet sheetByName = wb.getSheet("NAME");
		 */

		/**
		 * 获取工作簿的行数
		 */
		final int rowNumReal = sheet.getLastRowNum();
		System.out.println("----------------------");
		System.out.println("rowNumReal-->" + rowNumReal);
		System.out.println("----------------------");
		final int cellNumReal = sheet.getRow(rowNumReal).getPhysicalNumberOfCells();
		System.out.println("cellNumReal-->" + cellNumReal);

		//利用foreach循环 遍历sheet中的所有行 
		int rowNum=0;

		/**
		 * 直接采用这种循环空行和空列是不会读取的,
		 * 即当行有空行或者一行中有空单元格是,循环会跳过去
		 */
		for (final Row row : sheet) {
			rowNum++;
			//遍历row中的所有方格 
			for (final Cell cell : row) {

				final String valueT = getCellContentAsstring(cell);

				System.out.println(cell.toString() + " ---> " + valueT);
			}

			//每一个行输出之后换行 
			System.out.println();
		}

		System.out.println("----------------------");
		loopRowAndCell(sheet);
		System.out.println("rowNum-->"+rowNum);
		//关闭输入流 
		inp.close();
	}

	/**
	 * 遍历一个工作簿中的行和列
	 * 不包含空行和空列(无需对空行和空列做处理)
	 * @param sheet
	 * @throws Exception
	 */
	public static void loopRealRowAndCell(final Sheet sheet) throws Exception {

		/**
		 * 遍历行
		 */
		int rowno = 0;
		for (final Iterator itemRow = sheet.rowIterator(); itemRow.hasNext();) {
			final Row row = (Row) itemRow.next();
			rowno++;
			System.out.println("----------rowno----------" + rowno);
			/**
			 * 遍历列
			 */
			for (final Iterator itemCell = row.cellIterator(); itemCell.hasNext();) {
				final Cell cell = (Cell) itemCell.next();
				/**
				 * 获取单元格格式类型
				 * POI 3.15 beta 3. Use CellType.ERROR instead.
				 */
				String cellValue = "";
				switch (cell.getCellTypeEnum()) {
				case STRING:// 字符串
					cellValue = cell.getRichStringCellValue().getString().trim();
					break;
				case NUMERIC:// 数字

					//如果为时间格式的内容
					if (hssfDateUtil.isCellDateFormatted(cell)) {
						final SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
						cellValue = sdf.format(hssfDateUtil.getJavaDate(cell.getNumericCellValue())).toString();
						break;
					} else {

						/**
						 * 解决科学计数法的问题
						 */
						final Double d = cell.getNumericCellValue();
						final DecimalFormat dformat = new DecimalFormat("#.##");
						cellValue = dformat.format(d);

					}

					break;
				case BOOLEAN:// Boolean
					cellValue = String.valueOf(cell.getBooleanCellValue()).trim();
					break;
				case FORMULA:// 公式

					/**
					 * 解决公式的取值问题
					 */
					try {

						/**
						 * 公式计算结果是纯数字
						 */
						cellValue = String.valueOf(cell.getNumericCellValue());
					} catch (final IllegalStateException e) {

						/**
						 * 公式计算结果是不是纯数字
						 */
						cellValue = String.valueOf(cell.getRichStringCellValue());
					}

					/**
					 * 这句获取的是计算公式
					 */
					//cellValue = cell.getCellFormula() + "";
					break;

				case BLANK: // 空值
					cellValue = "BLANG";
					break;
				case ERROR: // 故障
					cellValue = "N/A";
					break;
				default://未知类型
					cellValue = "ERROR";
				}

				System.out.println(" cellValue---> " + cellValue);
			}
		}

	}

	/**
	 * 遍历一个工作簿中的行和列
	 * 包含空行和空列(传统遍历,需要对空行和空列进行处理)
	 * @param sheet
	 * @throws Exception
	 */
	public static void loopRowAndCell(final Sheet sheet) throws Exception {

		/**
		 * 得到的是最后一个不为空的行索引,真实行号是【getLastRowNum()+1】
		 */
		final int rowNumReal = sheet.getLastRowNum();

		/**
		 * 遍历行
		 */
		for (int rowIndex = 0; rowIndex <= rowNumReal; rowIndex++) {

			/**
			 * 获取当前行
			 */
			final Row row = sheet.getRow(rowIndex);

			/**
			 * 空行处理
			 */
			if (null == row) {
				System.out.println(" BLANG ROW " + rowIndex);
				continue;
			}
			/**
			 * 取得当前行的列数
			 */
			final int cellCount = row.getLastCellNum();

			/**
			 * 遍历列
			 */
			for (int cellIndex = 0; cellIndex < cellCount; cellIndex++) {
				/**
				 * 获取当前列,如果当前列不存在(为空)则返回一个单元格类型为空的单元格
				 */
				final Cell cell = row.getCell(cellIndex,Row.MissingCellPolicy.CREATE_NULL_AS_BLANK);

				/**
				 * 空列处理
				 */
				if (null == cell) {
					System.out.println(" BLANG CELL " + cellIndex);
					continue;
				}

				/**
				 * 获取单元格格式类型
				 * POI 3.15 beta 3. Use CellType.ERROR instead.
				 */
				String cellValue = "";
				switch (cell.getCellTypeEnum()) {
				case STRING:// 字符串
					cellValue = cell.getRichStringCellValue().getString().trim();
					break;
				case NUMERIC:// 数字

					//如果为时间格式的内容
					if (hssfDateUtil.isCellDateFormatted(cell)) {
						final SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
						cellValue = sdf.format(hssfDateUtil.getJavaDate(cell.getNumericCellValue())).toString();
						break;
					} else {

						/**
						 * 解决科学计数法的问题
						 */
						final Double d = cell.getNumericCellValue();
						final DecimalFormat dformat = new DecimalFormat("#.##");
						cellValue = dformat.format(d);

					}

					break;
				case BOOLEAN:// Boolean
					cellValue = String.valueOf(cell.getBooleanCellValue()).trim();
					break;
				case FORMULA:// 公式

					/**
					 * 解决公式的取值问题
					 */
					try {

						/**
						 * 公式计算结果是纯数字
						 */
						cellValue = String.valueOf(cell.getNumericCellValue());
					} catch (final IllegalStateException e) {

						/**
						 * 公式计算结果是不是纯数字
						 */
						cellValue = String.valueOf(cell.getRichStringCellValue());
					}

					/**
					 * 这句获取的是计算公式
					 */
					//cellValue = cell.getCellFormula() + "";
					break;

				case BLANK: // 空值
					cellValue = "BLANG";
					break;
				case ERROR: // 故障
					cellValue = "N/A";
					break;
				default://未知类型
					cellValue = "ERROR";
				}

				System.out.println(" cellValue---> " + cellValue);
			}
		}

	}

	/**
	 * 
	 *解析一个单元格得到数据
	 * @param cell
	 * @return
	 */
	private static String getCellContentAsstring(final Cell cell) {

		if (null == cell) {
			return "";
		}

		/**
		 * 获取单元格格式类型
		 * POI 3.15 beta 3. Use CellType.ERROR instead.
		 */
		String cellValue = "";
		switch (cell.getCellTypeEnum()) {
		case STRING:// 字符串
			cellValue = cell.getRichStringCellValue().getString().trim();
			break;
		case NUMERIC:// 数字

			//如果为时间格式的内容
			if (hssfDateUtil.isCellDateFormatted(cell)) {
				final SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
				cellValue = sdf.format(hssfDateUtil.getJavaDate(cell.getNumericCellValue())).toString();
				break;
			} else {

				/**
				 * 解决科学计数法的问题
				 */
				final Double d = cell.getNumericCellValue();
				final DecimalFormat dformat = new DecimalFormat("#.##");
				cellValue = dformat.format(d);

			}

			break;
		case BOOLEAN:// Boolean
			cellValue = String.valueOf(cell.getBooleanCellValue()).trim();
			break;
		case FORMULA:// 公式

			/**
			 * 解决公式的取值问题
			 */
			try {

				/**
				 * 公式计算结果是纯数字
				 */
				cellValue = String.valueOf(cell.getNumericCellValue());
			} catch (final IllegalStateException e) {

				/**
				 * 公式计算结果是不是纯数字
				 */
				cellValue = String.valueOf(cell.getRichStringCellValue());
			}

			/**
			 * 这句获取的是计算公式
			 */
			//cellValue = cell.getCellFormula() + "";
			break;

		case BLANK: // 空值
			cellValue = "BLANG";
			break;
		case ERROR: // 故障
			cellValue = "N/A";
			break;
		default://未知类型
			cellValue = "";
		}

		return cellValue;
	}

	/**
	 * 
	 * 读取已有Excel作为模板进行数据操作
	 * @param filePAth 模板路径
	 * @return -1:filePAth error;
	 * @throws IOException 
	 * @throws FileNotFoundException 
	 */
	public static int readTempleteExcel(final String filePAth,HttpServletResponse response) throws FileNotFoundException,IOException {

		if ((filePAth == null) || filePAth.trim().isEmpty()) {
			return -1;
		}

		/**
		 *  先读取模板 ,使用POIFSFileSystem对象构造的新hssfWorkbook对象。
		 */
		final POIFSFileSystem POIfs = new POIFSFileSystem(new FileInputStream(filePAth));

		/**
		 * 基于模板创建workbook 
		 */
		final hssfWorkbook workbook = new hssfWorkbook(POIfs);

		/**
		 * 如果模板存在多页的话可以分别取到 
		 */
		final hssfSheet sheet_1st = workbook.getSheetAt(0);

		//////////////////////------------------------
		// 第一页,第一行 
		final hssfRow row = sheet_1st.getRow(0);

		// 取第一个单元格 
		final hssfCell cell = row.getCell(0);

		// 获取单元格字符串值 
		final String cellValue = cell.getStringCellValue();

		System.out.println(cellValue);

		//final String path = "G:/POI_JAVA/demo.xls";

		// 输出Excel 
		HttpServletResponse newresponse=response;
		try {
			
			ByteArrayOutputStream os = new ByteArrayOutputStream();
			workbook.write(os);// hssfWorkbook写入流
			 byte[] content = os.toByteArray();
		    InputStream is = new ByteArrayInputStream(content);
		    
		    //文件名字符编码转换
		    //String strName = new String(filename.getBytes("UTF-8"),"ISO-8859-1");
			// 设置请求
		    // 设置response参数,可以打开下载页面
		    newresponse.reset();
		      
			newresponse.setContentType("application/octet-stream");
			newresponse.setHeader("Content-disposition","attachment;filename=" + URLEncoder.encode("aa.xls","UTF-8"));

			OutputStream outputStream = newresponse.getoutputStream();// 打开流
			
			BufferedInputStream bis = null;
		    bufferedoutputstream bos = null;
		    
		    bis = new BufferedInputStream(is);
		    bos = new bufferedoutputstream(outputStream);
		    byte[] buff = new byte[2048];
	        int bytesRead;
	        // Simple read/write loop.
	        while (-1 != (bytesRead = bis.read(buff,buff.length))) {
	          bos.write(buff,bytesRead);
	        }

			if (bis != null){
				 bis.close();
			}

	        if (bos != null){
	        	bos.close();
	        }
			outputStream.flush();// 刷新流
			outputStream.close();// 关闭流

			workbook.close();
			
		} catch (final IOException e) {
			// Todo Auto-generated catch block
			e.printstacktrace();
		}

		return 0;
	}
}


==================

AJAX实现Excel文件下载的更多相关文章

  1. 应用程序关闭时的iOS任务

    我正在构建一个应用程序,通过ajax将文件上传到服务器.问题是用户很可能有时不会有互联网连接,并且客户希望在用户重新连接时安排ajax调用.这可能是用户在离线时安排文件上传并关闭应用程序.应用程序关闭时可以进行ajax调用吗?

  2. android – Phonegap本地构建 – jquery ajax错误:readystate 0 responsetext status 0 statustext error

    解决方法您是否在索引文件中包含了内容安全元标记?

  3. Ajax简单的异步交互及Ajax原生编写

    一提到异步交互大家就会说ajax,仿佛ajax这个技术已经成为了异步交互的代名词.那下面将研究ajax的核心对象

  4. Ajax跨域问题的解决办法汇总(推荐)

    本文给大家分享多种方法解决Ajax跨域问题,非常不错具有参考借鉴价值,感兴趣的朋友一起学习吧

  5. ajax编写简单的登录页面

    这篇文章主要为大家详细介绍了ajax编写简单登录页面的具体代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  6. ajax从JSP传递对象数组到后台的方法

    今天小编就为大家分享一篇ajax从JSP传递对象数组到后台的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

  7. 解决ajax返回验证的时候总是弹出error错误的方法

    这篇文章主要介绍了解决ajax返回验证的时候总是弹出error错误的方法,感兴趣的小伙伴们可以参考一下

  8. 使用AJAX完成用户名是否存在异步校验

    这篇文章主要介绍了使用AJAX完成用户名是否存在异步校验的相关资料,需要的朋友可以参考下

  9. ajax实现无刷新省市县三级联动

    这篇文章主要为大家详细介绍了ajax实现无刷新省市县三级联动的相关资料,利用三层架构实现,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. jQuery Ajax 实现分页 kkpager插件实例代码

    本文通过实例代码给大家讲解了jQuery Ajax 实现分页 kkpager插件功能,需要的的朋友参考下吧

随机推荐

  1. xe-ajax-mock 前端虚拟服务

    最新版本见Github,点击查看历史版本基于XEAjax扩展的Mock虚拟服务插件;对于前后端分离的开发模式,ajax+mock使前端不再依赖后端接口开发效率更高。CDN使用script方式安装,XEAjaxMock会定义为全局变量生产环境请使用xe-ajax-mock.min.js,更小的压缩版本,可以带来更快的速度体验。

  2. vue 使用 xe-ajax

    安装完成后自动挂载在vue实例this.$ajaxCDN安装使用script方式安装,VXEAjax会定义为全局变量生产环境请使用vxe-ajax.min.js,更小的压缩版本,可以带来更快的速度体验。cdnjs获取最新版本点击浏览已发布的所有npm包源码unpkg获取最新版本点击浏览已发布的所有npm包源码AMD安装require.js安装示例ES6Module安装通过Vue.use()来全局安装示例./Home.vue

  3. AJAX POST数据中文乱码解决

    前端使用encodeURI进行编码后台java.net.URLDecoder进行解码编解码工具

  4. Koa2框架利用CORS完成跨域ajax请求

    实现跨域ajax请求的方式有很多,其中一个是利用CORS,而这个方法关键是在服务器端进行配置。本文仅对能够完成正常跨域ajax响应的,最基本的配置进行说明。这样OPTIONS请求就能够通过了。至此为止,相当于仅仅完成了预检,还没发送真正的请求呢。

  5. form提交时,ajax上传文件并更新到&lt;input&gt;中的value字段

  6. ajax的cache作用

    filePath="+escape;},error:{alert;}});解决方案:1.加cache:false2.url加随机数正常代码:网上高人解读:cache的作用就是第一次请求完毕之后,如果再次去请求,可以直接从缓存里面读取而不是再到服务器端读取。

  7. 浅谈ajax上传文件属性contentType = false

    默认值为contentType="application/x-www-form-urlencoded".在默认情况下,内容编码类型满足大多数情况。在这里,我们主要谈谈contentType=false.在使用ajax上传文件时:在其中先封装了一个formData对象,然后使用post方法将文件传给服务器。说到这,我们发现在JQueryajax()方法中我们使contentType=false,这不是冲突了吗?这就是因为当我们在form标签中设置了enctype=“multipart/form-data”,

  8. 909422229_ajaxFileUpload上传文件

    ajaxFileUpload.js很多同名的,因为做出来一个很容易。我上github搜AjaxFileUpload出来很多类似js。ajaxFileUpload是一个异步上传文件的jQuery插件传一个不知道什么版本的上来,以后不用到处找了。语法:$.ajaxFileUploadoptions参数说明:1、url上传处理程序地址。2,fileElementId需要上传的文件域的ID,即的ID。3,secureuri是否启用安全提交,默认为false。4,dataType服务器返回的数据类型。6,error

  9. AJAX-Cache:一款好用的Ajax缓存插件

    原文链接AJAX-Cache是什么Ajax是前端开发必不可少的数据获取手段,在频繁的异步请求业务中,我们往往需要利用“缓存”提升界面响应速度,减少网络资源占用。AJAX-Cache是一款jQuery缓存插件,可以为$.ajax()方法扩展缓存功能。

  10. jsf – Ajax update/render在已渲染属性的组件上不起作用

    我试图ajax更新一个有条件渲染的组件。我可以确保#{user}实际上是可用的。这是怎么引起的,我该如何解决呢?必须始终在ajax可以重新呈现之前呈现组件。Ajax正在使用JavaScriptdocument.getElementById()来查找需要更新的组件。但是如果JSF没有将组件放在第一位,那么JavaScript找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。

返回
顶部