背景:ajax,是什么懒得介绍了,就是一种js传递数据的方式。
接下来我会通过无参数,带常见参数String,float等,以及流(图片,文件)三种方式描述ajax的传参实例
1.无参数传递
jsp页面:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>k</title>
</head>
<body>
<script type = "text/javascript">
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","http://localhost:8080/ajaxTest/noParam",true);
xmlhttp.send();
</script>
</body>
</html>
控制器响应:
@RestController
public class AjaxController {
@GetMapping("/ajaxTest/noParam")
public void ajaxTestNoParam()
{
System.out.print("接收到来自ajax的请求");
}
}
end:
2.普通参数传递(使用ajax传递json)
2.1:你需要引用jquery,没有这个你就不能使用ajax
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
</head>
2.2:jsp页面
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>k</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
</head>
<body>
<button onclick = "send()"> send</button>
<script type = "text/javascript">
function send()
{
alert("233333");
var data = {"userName":"Boss","acc":"1234567","psd":"7654321"};
$.ajax({
type: 'POST',
url: "/login",
dataType: "json",
data: JSON.stringify(data),
contentType : "application/json",
success: function(data) {
console.log(data)
},
error: function() {
console.log("fucking error")
}
});
}
</script>
</body>
</html>
2.3:controller代码:
@PostMapping("/login")
public void login(@RequestBody Map<String,Object> map){
System.out.println(map.get("userName"));
System.out.println(map.get("acc"));
System.out.println(map.get("psd"));
}
2.4:end
3.文件传输
3.1:使用form表单进行传输
jsp的form代码:
<form action="/ajaxTest/uploadImage/form" method="post"enctype="multipart/form-data" >
<input type="file" name="rawPic" >
<input type = "submit" value = "提交"/>
</form>
controller:
@PostMapping("/ajaxTest/uploadImage/form")
public void uploadImageByForm(
//定义接收参数,它的name必须和你的form表单对应起来。
@RequestParam(required=true,name="rawPic")
MultipartFile rawPicFile
)
{
System.out.print("接收到一张图片");
try {
rawPicFile.transferTo(new File("D:\\temp\\uploadImageByForm.jpg"));
} catch (IllegalStateException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
3.2:使用ajax+form序列化的方式
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>k</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
</head>
<body>
<form id = "fileForm" >
<input type="file" name="rawPic" >
<input type = "submit" value = "提交"/>
</form>
<button onclick = "ajaxUpload()">上传数据</button>
<script type="text/javascript">
function ajaxUpload()
{
alert("上传文件");
var formData = new FormData($("#fileForm")[0]);
$.ajax({
url : 'http://localhost:8080/ajaxTest/uploadImage/form',
type: 'post',
data :formData,
contentType:false,
processData:false,
success: function(data)
{
alert("上传成功");
}
})
}
</script>
</body>
</html>
里面有几个非常重要的知识点
1.contentType
指的是你设定的传输的值的类型,默认为String,如果设置为ture,内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。
如果你传输的是文件类型,则其格式通常是:multyPart的,所以,你必须要设定为false(血的教训)
2.processData
要求为Boolean类型的参数,默认为true。默认情况下,发送的数据将被转换为对象(从技术角度来讲并非字符串)以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息,请设置为false。
参考资料:
https://www.cnblogs.com/huiyuantang/p/5458278.html
3.3:纯ajax方式上传文件
因为这个涉及到通过代码读取本地文件,所以,我们将会在下一章里面详细描述这个过程。