大家好，欢迎来到IT知识分享网。
页面中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",//要请求的服务器url
data:{ins:ins},//第一个name对应的是后端request.getParameter("name")的name、第二个name对应的是此js中的var name = $("#name").val();的name
async: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")
@ResponseBody
public String r(String ins) {
String s="";
if(ins.equals("")) {
s="输入不能为空";
}else {
s=ins;
}
return s;
}
运行测试：
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/25343.html
