ajax获取springmvc数据类型,Ajax上传文件,前端数据获取,SpringMVC后台数据接收

Ajax上传文件,前端数据获取,SpringMVC后台数据接收

目录

需求前期准备

SpringMVC.xml配置

Ajax前端数据获取

SpringMVC后端接收数据

1.需求前期准备

文件上传下载需要的SpringMVC相关jar包:

com.springsource.org.apache.commons.fileupload-1.2.0.jar

com.springsource.org.apache.commons.io-1.4.0.jar

注:可以选择高版本jar包,不过此版本是当前比较常用的jar包.

jar包下载地址:

https://download.csdn.net/download/marksunshine/10466580

2.SpringMVC.xml配置

class="org.springframework.web.multipart.commons.CommonsMultipartResolver">

bean>

3.Ajax前端数据获取

两种方式进行数据传输:

方法1:直接使用form表单提交

"fileForm" action="file/fileupload.action" method="post" enctype="multipart/form-data">

type="text" name="username">

type="text" name="age">

type="text" name="phoneNumber">

type="file" name="file">

type="submit" >保存

方法2:使用采用了FormData的传输方式

formData使用参考手册：https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/FormData

form表单:

"fileForm" name="fileForm" action="#" οnsubmit="return false" method="post" enctype="multipart/form-data">

type="text" name="username">

type="text" name="age">

type="text" name="phoneNumber">

type="file" name="file">

type="button" οnclick="getComtent()">保存

数据获取以及使用Ajax传递方法1:

function getComtent() {

//用户名

var username = document.fileForm.username.value;

//年龄

var age= document.fileForm.age.value;

//电话号码

var phoneNumber= document.fileForm.phoneNumber.value;

//文件

var file = document.fileForm.file.files[0];

//ormData是Html5新加进来的一个类,可以模拟表单数据

var fm = new FormData();

fm.append('username', username );

fm.append('age', age);

fm.append('phoneNumber', phoneNumber);

fm.append('file', articleClass);

//进行Ajax请求

$.ajax({

//几个参数需要注意一下

type: "POST",//方法类型

dataType: "json",//预期服务器返回的数据类型,可以不设置

url: "file/fileupload.action" ,//url

data: fm,

async: false,

cache: false,

contentType: false, //禁止设置请求类型

processData: false, //禁止jquery对DAta数据的处理,默认会处理

success: function (result) {

console.log(result);//打印服务端返回的数据(调试用)

if (result.isSuccess) {

//跳转页面

//window.location.href="user/personalDesk.action";

}

},

error : function() {

alert("异常！");

}

});script>

数据获取以及使用Ajax传递方法2:

function getComtent() {

var fm = new FormData($( "#fileForm" )[0]);

//进行Ajax请求

$.ajax({

//几个参数需要注意一下

type: "POST",//方法类型

dataType: "json",//预期服务器返回的数据类型,可以不设置

url: "file/fileupload.action" ,//url

data: fm,

async: false,

cache: false,

contentType: false, //禁止设置请求类型

processData: false, //禁止jquery对DAta数据的处理,默认会处理

success: function (result) {

console.log(result);//打印服务端返回的数据(调试用)

if (result.isSuccess) {

//跳转页面

//window.location.href="user/personalDesk.action";

}

},

error : function() {

alert("异常！");

}

});script>

4.SpringMVC后端接收数据

后台接收方式1:

@RequestMapping("/file/fileupload.action")

@ResponseBody

public Map createArticle(ModelMap map,HttpServletRequest request) {

//返回信息集合

Map resultMap = new HashMap();

try {

//解析请求中的数据

MultipartHttpServletRequest mpRequest = (MultipartHttpServletRequest) request;

MultipartFile file = mpRequest.getFile("file");

//上传文件的真实名称

String name = file.getOriginalFilename();

System.out.println("----------articleFile-name----------");

System.out.println(name);

resultMap.put("result", "操作成功");

resultMap.put("data", "");

resultMap.put("isSuccess", true);

} catch (Exception e) {

e.printStackTrace();

}

return resultMap;

}

后台接收方式2:

@RequestMapping("/file/fileupload.action")

@ResponseBody

public MapcreateArticle(HttpServletRequest request,

@RequestParam(value="file") CommonsMultipartFile file,

@RequestParam(value = "username") String username,

@RequestParam(value = "age") String age,

@RequestParam(value = "phoneNumber") String phoneNumber

) {

//返回信息集合

MapresultMap = new HashMap();

try {

System.out.println("----------Filename----------");

System.out.println(file.getOriginalFilename());

System.out.println("----------username----------");

System.out.println(username);

System.out.println("----------phoneNumber----------");

System.out.println(phoneNumber);

System.out.println("----------age----------");

System.out.println(age);

resultMap.put("result", "操作成功");

resultMap.put("data", "");

resultMap.put("isSuccess", true);

} catch (Exception e) {

e.printStackTrace();

}

return resultMap;

}