©2020-2024 ioDraw All rights reserved,
Privacy Policy
页面中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; }
运行测试：