ajax实现文件上传和表单提交

做技术我是认真的

已于 2022-06-26 11:13:41 修改

阅读量7.7k

点赞数 3

分类专栏： java 文章标签： ajax javascript 前端

于 2022-02-22 20:23:42 首次发布

本文链接：https://blog.csdn.net/qq_34091529/article/details/123076435

版权

java 专栏收录该内容

22 篇文章 2 订阅

订阅专栏

1. ajax提交表单

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>login test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="ajax方式">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        function login() {
            $.ajax({
            //几个参数需要注意一下
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "/users/login" ,//url
                data: $('#form1').serialize(),
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    if (result.resultCode == 200) {
                        alert("SUCCESS");
                    }
                    ;
                },
                error : function() {
                    alert("异常！");
                }
            });
        }
    </script>
</head>
<body>
<div id="form-div">
    <form id="form1" onsubmit="return false" action="##" method="post">
        <p>用户名：<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p>
        <p>密　码：<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p>
        <p><input type="button" value="登录" onclick="login()">&nbsp;<input type="reset" value="重置"></p>
    </form>
</div>
</body>
</html>

2. ajax文件上传

前台：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="static/js/jquery-1.7.2.js"></script>
    <script>
        $(function () {
            $("#sub_btn").click(function () {
                var formData1=new FormData($("#fm")[0]);
                $.ajax({
                    type:"post",
                    url:"TestServlet",
                    dataType:"json",
                    data:formData1,
                    //是否缓存
                    cache: false,
              //当设置为false的时候,jquery 的ajax 提交的时候会序列化 data
                    processData: false,
                    /*contentType都是默认的值：application/x-www-form-urlencoded；
                    *表单中设置的contentType为"multipart/form-data"；
                     * ajax 中 contentType 设置为 false ，是为了避免 JQuery对要提交
                     * 的表单中的enctype值修改*/
                    contentType: false,
                    success:function (result) {
                        
                    }
                })
            })
        })
    </script>
</head>
<body>
    <form action="TestServlet" method="post" enctype="multipart/form-data" id="fm">
        <input type="text" name="uname" id="uname"> <br>
        <input type="file" name="photo" id="photo"><br>
        <input type="button" value="提交" id="sub_btn">
    </form>
</body>
</html>

后台：

package com.offcn.servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.MultipartConfig;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.Part;
import java.io.IOException;
@MultipartConfig
@WebServlet(name = "TestServlet", urlPatterns = "/TestServlet")
public class TestServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        Part photo = request.getPart("photo");
        String uname = request.getParameter("uname");
        String fileName = photo.getSubmittedFileName();
        photo.write("d://"+fileName);
        System.out.println(uname+"---"+fileName);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request,response);
    }
}