當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

AJAX的post请求与上传文件

發(fā)布時(shí)間：2025/6/15 编程问答 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 AJAX的post请求与上传文件小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

之前介紹了AJAX的get的請(qǐng)求方式與跨域請(qǐng)求，除此之外AJAX還可以進(jìn)行異步的post請(qǐng)求，在使用post方式的請(qǐng)求時(shí)需要設(shè)置請(qǐng)求頭，如下：

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

如果沒有設(shè)置請(qǐng)求頭信息的話，服務(wù)端是接收不到post數(shù)據(jù)的。

以下示例簡(jiǎn)單演示如何提交post表單數(shù)據(jù)：

<%@ 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);// 設(shè)置請(qǐng)求頭信息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){// 顯示服務(wù)端響應(yīng)的數(shù)據(jù)alert(request.responseText);}else{alert("服務(wù)端沒有響應(yīng)數(shù)據(jù)！");}};// 發(fā)送post表單數(shù)據(jù)request.send("phone="+telNumber.value);}} </script> <body><input type="text" name="phone" id="telNumber" placeholder="手機(jī)號(hào)碼" /><button type="button" onclick="sendCode()">發(fā)送</button> </body> </html>

服務(wù)端代碼：

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("手機(jī)號(hào)碼是：" + httpServletRequest.getParameter("phone"));httpServletResponse.setContentType("text/html;charset=UTF-8");PrintWriter printWriter = httpServletResponse.getWriter();printWriter.print("服務(wù)器已收到");} }

服務(wù)端控制臺(tái)打印結(jié)果：

手機(jī)號(hào)碼是：1234567899

客戶端顯示響應(yīng)數(shù)據(jù)：

通過(guò)AJAX上傳文件

上面我們演示了使用AJAX提交post表單數(shù)據(jù)，那么上傳文件的請(qǐng)求方式也是post，以下示例演示簡(jiǎn)單的使用AJAX做一個(gè)帶有進(jìn)度條的文件上傳。
頁(yè)面代碼：

<%@ 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() {// 表單數(shù)據(jù)對(duì)象var formData = new FormData();// 多個(gè)文件需要進(jìn)行逐個(gè)遍歷for (var i = 0; i < document.getElementById("files").files.length; i++) {// 將文件數(shù)據(jù)添加到表單數(shù)據(jù)中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("上傳失敗！");}};// 給進(jìn)度條添加監(jiān)聽事件，這樣才有進(jìn)度條的效果request.upload.addEventListener("progress", progressChange, false)// 上傳表單數(shù)據(jù)request.send(formData);}}// 改變進(jìn)度條function progressChange(event) {progress1.max = event.total; // 數(shù)據(jù)的總大小progress1.value = event.loaded; // 當(dāng)前已上傳的大小}</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>

服務(wù)端代碼：

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();// 設(shè)置臨時(shí)文件的保存路徑DiskFileItemFactory diskFileItemFactory = new DiskFileItemFactory();diskFileItemFactory.setRepository(new File("D:/"));// 實(shí)例化文件上傳對(duì)象ServletFileUpload servletFileUpload = new ServletFileUpload(diskFileItemFactory);servletFileUpload.setHeaderEncoding("UTF-8");// 文件的保存路徑File savePath = new File(this.getServletContext().getRealPath("/uploadDir"));System.out.println(savePath.getPath());try {// 拿出請(qǐng)求數(shù)據(jù)List<FileItem> fileItems = servletFileUpload.parseRequest(httpServletRequest);for (FileItem fileItem : fileItems) {// 過(guò)濾表單字段if (!fileItem.isFormField()) {//兼容IE，IE傳過(guò)來(lái)的是路徑，需要截取出文件名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) {// 上傳失敗響應(yīng)0printWriter.print("0");e.printStackTrace();}// 上傳成功響應(yīng)1printWriter.print("1");} }

運(yùn)行效果：

本文轉(zhuǎn)自 ZeroOne01 51CTO博客，原文鏈接：http://blog.51cto.com/zero01/2055546，如需轉(zhuǎn)載請(qǐng)自行聯(lián)系原作者

總結(jié)

以上是生活随笔為你收集整理的AJAX的post请求与上传文件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： lua元表和元方法《lua程序设计》
下一篇： Windows azure国际版下通过