页面中ajax发起请求，controller接收数据并处理

这次ajax的测试以访问html的方式配置

在这里插入图片描述

配置yml文件：

然后在 src/main/webapp下创建一个html页面

创建controller：

运行项目就可以访问到index.html：

引入jquery：

修改index.html页面：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/jquery-1.8.3.js"></script>
<script>$(function(){$("#s").click(function(){var ins=$("#ins").val();$.ajax({url:"/r",//要请求的服务器urldata:{ins:ins},//第一个name对应的是后端request.getParameter("name")的name、第二个name对应的是此js中的var name = $("#name").val();的nameasync:true,//是否是异步请求cache:false,//是否缓存结果type:"POST",//请求方式dataType:"text",//服务器返回什么类型数据 text xml javascript json(javascript对象)success:function(result){//函数会在服务器执行成功后执行，result就是服务器返回结果console.log(result);	  $("#re").html(result);			},error:function(jqXHR, textStatus, errorThrown) {}});});});
</script>
</head>
<body>
<h1>我是html页面</h1><input type="text" id="ins" /><button id="s">发起ajax</button>
<span id="re"></span>
</body>
</html>

然后再写一个controller来接收：

	//因为页面的实现是想点击按钮后就发起ajax请求传入input输入的内容，所以这里的方法有个String类型的ins参数，//要和发起ajax方法里的data的:前的名字一样//而@ResponseBody是表示这个方法是返回的参数类型是json格式@RequestMapping("/r")@ResponseBodypublic String r(String ins) {String s="";if(ins.equals("")) {s="输入不能为空";}else {s=ins;}return s;}

在这里插入图片描述
运行测试：