當前位置：
首頁 >
AJAX的post请求与上传文件
發布時間：2025/6/15
40
豆豆
生活随笔
收集整理的這篇文章主要介紹了
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;("/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做一個帶有進度條的文件上傳。
頁面代碼：
服務端代碼：
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;("/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请求与上传文件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： lua元表和元方法 《lua程序设计》
- 下一篇： 格式化磁盘