基于SpringMVC的Ajax
后台代码返回String类型
package controller;
import javax.servlet.http.HttpServletRequest;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
public class AjaxHandler {
@RequestMapping(value = "/ajax.action", method = RequestMethod.POST, produces = "text/html;charset=UTF-8")
@ResponseBody
public String method1(HttpServletRequest request) {
// 获得key为username的value
String username = request.getParameter("username");
// 处理获得的参数
System.out.println(username);
String reslut = "登录成功:" + username;
// 返回结果
return reslut;
}
}前台代码
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function() {
/* Ajax post */
$('#submitbt').click(function() {
var Username = $("#username").val();
$.post("ajax.action", {
username : Username,
}, function(data) {
//从后台传过来的数据
alert(data);
});
});
/* Ajax post */
});
</script>
<body>
<form action="" method="post">
username<input type="text" name="username" id="username" />
<input type="button" value="Ajax" id="submitbt">
</form>
</body>返回List<Student>
后台代码
@RequestMapping(value = "/ajaxList.action", produces = { "application/json;charset=UTF-8" })
@ResponseBody
public List<Student> returnList(HttpServletRequest request) {
System.out.println("从前台获取的参数：" + request.getParameter("username"));
List<Student> students = new ArrayList<>();
Student stu1 = new Student(1, "张三");
Student stu2 = new Student(2, "李四");
Student stu3 = new Student(3, "王五");
students.add(stu1);
students.add(stu2);
students.add(stu3);
return students;
}前台代码
$('#ajaxlist').click(function() {
$.post("ajaxList.action", {
username : '123'//这是地方是参数
}, function(data) {
//从后台传过来的数据 字符串[{"id":1,"name":"张三"},{"id":2,"name":"李四"},{"id":3,"name":"王五"}]
//开始解析List<Student>
for(i=0;i<data.length;i++){
var str="<li value="+data[i].id+">"+data[i].id+data[i].name+"</li>";
$("#listStudent").append(str);
}
});
});<h1>返回ListStudent</h1>
<button id="ajaxlist">获取List</button>
<ul id="listStudent">
<li>如下</li>
</ul>返回Map
后台代码
@RequestMapping(value = "/ajaxMap.action", produces = { "application/json;charset=UTF-8" })
@ResponseBody
public Map<String, Object> returnMap() {
Map<String, Object> maps = new HashMap<>();
maps.put("student", "张三");
maps.put("teacher", "李四");
return maps;
} $('#ajaxMap').click(function() {
$.post("ajaxMap.action", {
username : '123'//这是地方是参数
}, function(data) {
//从后台传过来的数据 字符串{"teacher":"李四","student":"张三"}
//开始解析Map<String>
var str="<li value="+1+">"+data.student+"</li>";
$("#mapString").append(str);
var str="<li value="+1+">"+data.teacher+"</li>";
$("#mapString").append(str);
});
});<h1>返回Map</h1>
<button id="ajaxMap">获取Map</button>
<ul id="mapString">
<li>如下</li>
</ul>出现406错误
少jar,下面有下载链接，如果失效，去上面的项目里的lib下去找
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2022-03-07，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录