卜若的代码笔记系列-Web系列-SpringBoot-第十四章：使用ajax传递参数-3214

最新推荐文章于 2023-11-15 20:51:09 发布

卜若

最新推荐文章于 2023-11-15 20:51:09 发布

阅读量183

点赞数

分类专栏： web springBoot 文章标签： web srpingboot

本文链接：https://blog.csdn.net/qq_37080133/article/details/82920697

版权

web 同时被 2 个专栏收录

33 篇文章 0 订阅

订阅专栏

springBoot

33 篇文章 0 订阅

订阅专栏

背景：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方式上传文件

因为这个涉及到通过代码读取本地文件，所以，我们将会在下一章里面详细描述这个过程。

卜若

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
卜若的代码笔记系列-Web系列-SpringBoot-第十四章：使用ajax传递参数-3214

背景：ajax，是什么懒得介绍了，就是一种js传递数据的方式。接下来我会通过无参数，带常见参数String，float等，以及流（图片，文件）三种方式描述ajax的传参实例1.无参数传递jsp页面：&lt;!DOCTYPE html&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://w...
复制链接

扫一扫