页面中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; }

运行测试:

技术
友情链接
码工具
Toolsou
API参考文档
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:766591547
关注微信