SpringMVC与Ajax json

最新推荐文章于 2022-01-06 02:08:41 发布

翱翔的鱼

最新推荐文章于 2022-01-06 02:08:41 发布

阅读量323

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JSON 文章标签： json

本文链接：https://blog.youkuaiyun.com/qq_39924152/article/details/80658737

JSON 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍如何在Spring MVC框架中实现JSON数据交互，包括配置开发环境、搭建web.xml及applicationContext.xml文件、创建实体类与控制器，并通过ajax请求获取JSON格式的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.配置开发环境

---导入ioc、webmvc开发包

---applicationContext.xml

---jquery.js

---Jackson.jar包（springMVC配套的jar包，使用注解标记就能使用）

2.配置web.xml

<servlet>
<servlet-name>springmvcjson</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:applicationContext.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>springmvcjson</servlet-name>
<url-pattern>*.do</url-pattern>

</servlet-mapping>

3.配置applicationContext.xml

<mvc:annotation-driven></mvc:annotation-driven>

<context:component-scan base-package="controller"></context:component-scan>

4.写一个实体类Note

public class Note implements Serializable{
private String id;
private String name;
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}

}

5.写一个controller

@Controller
public class LoadNoteController {
@RequestMapping("/demo.do")
@ResponseBody
public List<Note> execute(){
List<Note> list = new ArrayList<Note>();
Note note = new Note();
note.setId("01");
note.setName("java基础");
Note note1 = new Note();
note1.setId("02");
note1.setName("ajax基础");
list.add(note);
list.add(note1);
return list;
}

}

6.写一个页面：demo.html

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#loadNoteBtn").click(function(){
$.ajax({
url:"demo.do",
type:"post",
dataType:"json",
success:function(result){
$("#note_list").empty();
for(var i=0;i<result.length;i++){
var id = result[i].id;
var name = result[i].name;
var s_li = "<li>"+name+"</li>";
var $li = $(s_li);
$li.data("noteId",id);
$("#note_list").append($li);
}
}
});
});
});
</script>
</head>
<body>
<input id="loadNoteBtn" type="button" value="显示笔记">
<hr>
<ul id="note_list"></ul>
</body>

</html>

7.实现效果