Ajax基于rest风格上传图片_ajax支持rest风格的请求吗-CSDN博客

本文链接：https://blog.csdn.net/weixin_44038982/article/details/95939172

博客主要介绍了Ajax上传的相关内容。强调ajax的put请求不能用formdata提交，只能普通提交，formdata用于文件域提交，上传图片就用它。还提到让web程序支持put和delete请求需在web.xml配置，以及Ajax上传普通文本的post、put方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、注意事项（重要的放前面）
ajax的put请求不能使用formdata提交，不管怎样数据都为空
ajax的put请求不能使用formdata提交，不管怎样数据都为空
ajax的put请求不能使用formdata提交，不管怎样数据都为空
只能用普通提交，formdata提交只能是文件域的提交
ajax请求类型为put的时候，必须在 web.xml配置
必须配置HttpPutFormContentFilter要不然传回后台的数据会为空

ajax提交的方式后台的controller不会返回视图，也就是不会跳转页面
因为ajax是局部刷新技术，不会刷新整个页面
ajax中成功回调函数的rs如果是string类型的话，ajax的请求方式必须加dataType = text
string类型乱码的话，出现？？？？？

ajax的put请求不能使用formdata提交，不管怎样数据都为空

formdata提交只能是文件域的提交，专门用于上传图片

2、首先让web程序支持put和delete请求
需要在web.xml中配置：

	<!-- 增加HiddenHttpMethodFilte过滤器：目的是给普通浏览器 增加 put|delete请求方式 -->
	  <!--    支持restful风格，可以把 POST 请求转为 DELETE 或 PUT 请求-->
	  <filter>
	    <filter-name>HiddenHttpMethodFilter</filter-name>
	    <filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class>
	  </filter>
	  <filter-mapping>
	    <filter-name>HiddenHttpMethodFilter</filter-name>
	    <url-pattern>/*</url-pattern>
	  </filter-mapping>
	
	  <!--配置SpringMVC，把PUT或者DELETE请求转换成POST-->
	  <filter>
	    <filter-name>HttpPutFormContentFilter</filter-name>
	    <filter-class>org.springframework.web.filter.HttpPutFormContentFilter</filter-class>
	  </filter>
	  <filter-mapping>
	    <filter-name>HttpPutFormContentFilter</filter-name>
	    <url-pattern>/*</url-pattern>
	  </filter-mapping>

3、Ajax上传普通文本
①post方式

$.ajax({
            url: "/ssm_kgc/news/updateNews/" + id,
            type: "post",
            data: {
                "_method": "put",
                "categoryId":categoryId,
                "title":title,
                "summary":summary,
                "author":author,
                "content":content
            },
            success: function () {

            }
        })

②put方式提交

  $.ajax({
            url: "/ssm_kgc/news/updateNews/" + id,
            type: "PUT",
            data: {
                "categoryId":categoryId,
                "title":title,
                "summary":summary,
                "author":author,
                "content":content
            },
            success: function () {

            }
        })

4、Ajax上传图片的方式

使用formdata来进行提交

//图片被修改时触发，修改文件名
function editImg() {

    var formdata = new FormData();
    formdata.append("fileUpload", $("#imgFile")[0].files[0]);

    //ajax上传图片
    $.ajax({
        url: "/ssm_kgc/fileUpload",
        type: "post",
        dataType: "text",
        data: formdata,
        contentType: false,
        processData: false,
        enctype: "multipart/form-data",
        success: function (rs) {
            // alert(rs)
            if (rs != '') {
                $("#myImg").attr("src", "/ssm_kgc/upload/" + rs);
            }
        }
    })
}

input标签中需要添加标签：

		 <label for="imgFile">
                    <img width="200" id="myImg" src="" alt="">
                    点击图片修改
                </label>

		<!--    专门用于上传文件的-->
	  <input style="display: none;" onchange="editImg()" id="imgFile" type="file" name="fileUpload"><br>

这样就可以了！！！