AJAX的post请求与上传文件

班级编号：VIP14

学员名字：端碗吹水

课程名称：AJAX的post请求与上传文件

上课时间：2017-12-26

---

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" %>


    



    
    发送

服务端代码：

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" %>


    



    
    上传
    


    

服务端代码：

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 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) {
            // 上传失败响应0
            printWriter.print("0");
            e.printStackTrace();
        }

        // 上传成功响应1
        printWriter.print("1");
    }
}

运行效果：