AJAX的post请求与上传文件

之前介绍了AJAX的get的请求方式与跨域请求，除此之外AJAX还可以进行异步的post请求，在使用post方式的请求时需要设置请求头，如下：

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

如果没有设置请求头信息的话，服务端是接收不到post数据的。

以下示例简单演示如何提交post表单数据：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>Title</title>
</head>
<script>function createCORSRequest(method, url) {var xhr = new XMLHttpRequest();if ("withCredentials" in xhr) {xhr.open(method, url, true);// 设置请求头信息xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");} else if (typeof XDmainRequest != "undefined") { //兼容IExhr = new XDmainRequest();xhr.open(method, url, true);xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");} else {xhr = null;}return xhr;}function sendCode() {var request = createCORSRequest('post', 'send');if (request) {request.onload=function () {if(request.responseText){// 显示服务端响应的数据alert(request.responseText);}else{alert("服务端没有响应数据！");}};// 发送post表单数据request.send("phone="+telNumber.value);}}
</script>
<body><input type="text" name="phone" id="telNumber" placeholder="手机号码" /><button type="button" onclick="sendCode()">发送</button>
</body>
</html>

服务端代码：

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;@WebServlet("/send")
public class SendCodeServlet extends HttpServlet {protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {System.out.println("手机号码是：" + httpServletRequest.getParameter("phone"));httpServletResponse.setContentType("text/html;charset=UTF-8");PrintWriter printWriter = httpServletResponse.getWriter();printWriter.print("服务器已收到");}
}

服务端控制台打印结果：

手机号码是：1234567899

客户端显示响应数据：

通过AJAX上传文件

上面我们演示了使用AJAX提交post表单数据，那么上传文件的请求方式也是post，以下示例演示简单的使用AJAX做一个带有进度条的文件上传。
页面代码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>Title</title>
</head>
<script>function createCORSRequest(method, url) {var xhr = new XMLHttpRequest();if ("withCredentials" in xhr) {xhr.open(method, url, true);} else if (typeof XDmainRequest != "undefined") { //兼容IExhr = new XDmainRequest();xhr.open(method, url, true);} else {xhr = null;}return xhr;}function upload() {// 表单数据对象var formData = new FormData();// 多个文件需要进行逐个遍历for (var i = 0; i < document.getElementById("files").files.length; i++) {// 将文件数据添加到表单数据中formData.append("files", document.getElementById("files").files[i]);}var request = createCORSRequest('post', 'upload');if (request) {request.onload = function () {if (request.responseText == "1") {alert("上传成功！");} else {alert("上传失败！");}};// 给进度条添加监听事件，这样才有进度条的效果request.upload.addEventListener("progress", progressChange, false)// 上传表单数据request.send(formData);}}// 改变进度条function progressChange(event) {progress1.max = event.total;  // 数据的总大小progress1.value = event.loaded;  // 当前已上传的大小}</script>
<body><input type="file" id="files" name="fileUpload" multiple="multiple"/><button type="button" name="button" onclick="upload()">上传</button><br><br><progress id="progress1"></progress>
</body>
</html>

服务端代码：

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.io.FileUtils;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;@WebServlet("/upload")
public class UploadServlet extends HttpServlet {protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {PrintWriter printWriter = httpServletResponse.getWriter();// 设置临时文件的保存路径DiskFileItemFactory diskFileItemFactory = new DiskFileItemFactory();diskFileItemFactory.setRepository(new File("D:/"));// 实例化文件上传对象ServletFileUpload servletFileUpload = new ServletFileUpload(diskFileItemFactory);servletFileUpload.setHeaderEncoding("UTF-8");// 文件的保存路径File savePath = new File(this.getServletContext().getRealPath("/uploadDir"));System.out.println(savePath.getPath());try {// 拿出请求数据List<FileItem> fileItems = servletFileUpload.parseRequest(httpServletRequest);for (FileItem fileItem : fileItems) {// 过滤表单字段if (!fileItem.isFormField()) {//兼容IE，IE传过来的是路径，需要截取出文件名String fileName=fileItem.getName();if (fileName.indexOf("\\") >= 0) {System.out.println(fileName);fileName=fileName.substring(fileName.lastIndexOf("\\"),fileName.length());}// 写入文件到保存路径中FileUtils.copyInputStreamToFile(fileItem.getInputStream(), new File(savePath, fileName));}}} catch (FileUploadException e) {// 上传失败响应0printWriter.print("0");e.printStackTrace();}// 上传成功响应1printWriter.print("1");}
}

运行效果：

本文转自 ZeroOne01 51CTO博客，原文链接：http://blog.51cto.com/zero01/2055546，如需转载请自行联系原作者

AJAX的post请求与上传文件相关推荐

使用FormData，进行Ajax请求并上传文件
使用FormData,进行Ajax请求并上传文件这里使用JQuery,但是老版本的JQuery比如1.2是不支持的,最好使用2.0或更新版本: Html代码 <form id= " ...
php 异步进度条,PHP学习：PHP+Ajax异步带进度条上传文件实例
<PHP学习:PHP+Ajax异步带进度条上传文件实例>要点: 本文介绍了PHP学习:PHP+Ajax异步带进度条上传文件实例,希望对您有用.如果有疑问,可以联系我们. PHP应用前端引入 ...
ajax ashx 请选择文件,ajax+jquery+ashx如何实现上传文件
ajax+jquery+ashx如何实现上传文件第一:建立Default.aspx页面 ajax图片上传 function upload(){ var path = document.getElem ...
爬虫实战学习笔记_4 网络请求urllib3模块：发送GET/POST请求实例+上传文件+IP代理+json+二进制+超时
1 urllib3模块简介 urllib3是一个第三方的网络请求模块(单独安装该模块),在功能上比Python自带的urllib强大. 1.1了解urllib3 urllib3库功能强大,条理清晰的用 ...
FastAPI从入门到实战（11）——表单请求与上传文件
本文主要记录表单的数据请求以及上传不同大小的文件.上传多个文件.获取文件信息等相关内容. 表单请求 @app07.post("/stu07/form") def stu07_for ...
vue封装请求获取上传文件进度及设置超时时间
效果图: /utils/request.js // 上传文件 export function uploadFile({url, data, timeout, callback}) {timeout ? ...
带上传文件的ajax保存,ajaxfileupload带参数上传文件
使用Jquery Ajax File Uploader这个控件上传这个控件有个缺点,就是不能传递自定义参数.通过更改ajaxfileupload.js文件可以解决此问题. 主要更改点32行,增加42 ...
java序列化表单同步请求_Ajax serialize() 表单进行序列化方式上传文件
通过传统的 form 表单提交的方式上传文件上传文件: 不过传统的 form 表单提交会导致页面刷新,但是在有些情况下,我们不希望页面被刷新,这种时候我们都是使用 Ajax 的方式进行请求的. 使用 ...
Minio入门系列【13】使用WebUploader上传文件到Minio服务器
前言在之前介绍了Minio常用功能,以及如何使用JAVA SDK集成Minio,但是没有涉及到前端应该怎么做,接下来介绍如何使用Web组件集成Minio进行文件处理. WebUploader(摘自官 ...

AJAX的post请求与上传文件

通过AJAX上传文件

AJAX的post请求与上传文件相关推荐

最新文章

热门文章