【Spring学习笔记-MVC-5】利用spring MVC框架，实现ajax异步请求以及json数据的返回...

作者：ssslinppp      时间： 2015年5月26日 15:32:51

---

1. 摘要

本文讲解如何利用spring MVC框架，实现ajax异步请求以及json数据的返回。

Spring MVC与json参考文章： 【spring学习笔记-mvc-3】返回json数据-方式1  和  【spring学习笔记-mvc-4】返回json数据-方式2。

使用到的技术主要如下：

1. Ajax：使用JQuery 提供的ajax；==>需要引入jquery.min.js文件；
2. Spring MVC；
3. Json：提供两种方式返回json数据；

2. 项目结构

3. 前端

前台主界面：

文件位置：     浏览器界面：   

---

1. <%@ page language="java" pageEncoding="UTF-8"%>
2. <%
3. String path = request.getContextPath();
4. String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
5. response.setHeader("Pragma", "no-cache");
6. response.setHeader("Cache-Control", "no-cache");
7. response.setDateHeader("Expires", 0);
8. %>
13. type="text/javascript">var basePath = "<%=basePath%>";
14. <%-- <link rel="stylesheet" type="text/css" href="<%=basePath%>js/easyui/demo.css"> --%>
20. style="padding:5px 0;">

21. 方式1

22. href="#" class="easyui-linkbutton" onclick="loadData1()" data-options="iconCls:'icon-add'">ajax异步获取json数据

style="margin:10px 0 20px 0;">

style="padding:5px 0;">

方式2

href="#" class="easyui-linkbutton" onclick="loadData2()" data-options="iconCls:'icon-add'">ajax异步获取json数据

---

ajaxAndJson.js文件==>具体的ajax请求

---

---

1. function loadData1() {
2. var actionUrl = basePath + "test/testMVC1.action";
3. var params = {
4. "username" : 'zhangSan',
5. 'passwd' : '12345678'
6. };
7. $.ajax({
8. url : actionUrl,
9. data : params,
10. dataType : "json",
11. cache : false,
12. error : function(textStatus, errorThrown) {
13. // $.messager.alert('错误', "系统请求错误: " + textStatus, 'error');
14. alert("系统请求错误: " + textStatus);
15. },
16. success : function(data, textStatus) {
17. // $.messager.alert('系统提示', data.username+data.passwd ,'info');
18. alert(data.username+data.passwd );
19. }
20. });
21. }
23. function loadData2() {
24. var actionUrl = basePath + "test/testMVC2.action";
25. var params = {
26. "username" : 'lisi',
27. 'passwd' : '888888'
28. };
29. $.ajax({
30. url : actionUrl,
31. data : params,
32. dataType : "json",
33. cache : false,
34. error : function(textStatus, errorThrown) {
35. // $.messager.alert('错误', "系统请求错误: " + textStatus, 'error');
36. alert("系统请求错误: " + textStatus);
37. },
38. success : function(data, textStatus) {
39. // $.messager.alert('系统提示', data.Info+", "+data.userList[1].username ,'info');
40. alert(data.Info+", "+data.userList[1].username);
41. }
42. });
43. }

---

4. spring mvc配置文件

web.xml

---

1. id="WebApp_ID" version="2.4"
2. xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
3. xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
4. http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
7. contextConfigLocation
8. classpath:applicationContext.xml
12. org.springframework.web.context.ContextLoaderListener
16. mvc-dispatcher
17. org.springframework.web.servlet.DispatcherServlet
18. 1
21. mvc-dispatcher
22. /rest/*

---

spring-servlet.xml

1. xml version="1.0" encoding="UTF-8" ?>
2. xmlns="http://www.springframework.org/schema/beans"
3. xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"
4. xmlns:context="http://www.springframework.org/schema/context"
5. xmlns:mvc="http://www.springframework.org/schema/mvc"
6. xsi:schemaLocation="http://www.springframework.org/schema/beans
7. http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
8. http://www.springframework.org/schema/context
9. http://www.springframework.org/schema/context/spring-context-3.0.xsd
10. http://www.springframework.org/schema/mvc
11. http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd">
14. base-package="com.ll.web"/>
18. class="org.springframework.web.servlet.view.InternalResourceViewResolver"
19. p:viewClass="org.springframework.web.servlet.view.JstlView"
20. p:prefix="/jsp/"
21. p:suffix=".jsp" />
24. class="org.springframework.web.servlet.view.BeanNameViewResolver"
25. p:order="10" />
28. id="testMVC"
29. class="org.springframework.web.servlet.view.json.MappingJacksonJsonView">
30. name="renderedAttributes">
32. userList
33. Info

---

applicationContext.xml

1. xml version="1.0" encoding="UTF-8" ?>
2. xmlns="http://www.springframework.org/schema/beans"
3. xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"
4. xmlns:context="http://www.springframework.org/schema/context"
5. xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx"
6. xsi:schemaLocation="http://www.springframework.org/schema/beans
7. http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
8. http://www.springframework.org/schema/context
9. http://www.springframework.org/schema/context/spring-context-3.0.xsd
10. http://www.springframework.org/schema/tx
11. http://www.springframework.org/schema/tx/spring-tx-3.0.xsd
12. http://www.springframework.org/schema/aop
13. http://www.springframework.org/schema/aop/spring-aop-3.0.xsd">
16. base-package="com.ll.service"/>
17. base-package="com.ll.dao"/>

---

5. 控制器

AjaxController.java

1. package com.ll.web;
3. import java.util.ArrayList;
4. import java.util.List;
6. import org.springframework.stereotype.Controller;
7. import org.springframework.ui.ModelMap;
8. import org.springframework.web.bind.annotation.RequestMapping;
9. import org.springframework.web.bind.annotation.ResponseBody;
11. import com.ll.model.Person;
13. @Controller
14. @RequestMapping(value = "/test")
15. public class AjaxController {
17. /**
18. * 返回主页
19. * @return
20. */
21. @RequestMapping(value = "/index.action")
22. public String index() {
23. return "index";
24. }
26. /**
27. * 方式1：
28. * 使用@ResponseBody方式返回json数据
29. * @param username
30. * @param passwd
31. * @return
32. */
33. @ResponseBody
34. @RequestMapping(value = "/testMVC1.action")
35. public Person testAjax(String username,String passwd) {
36. System.out.println("ajax-使用@ResponseBody方式返回json数据==>" + username + "(" + passwd + ")");
38. return new Person(username,passwd);
39. }
41. /**
42. * 方式2：
43. * 使用MappingJacksonJsonView和bean视图解析器返回json数据
44. * @param mm
45. * @param username
46. * @param passwd
47. * @return
48. */
49. @RequestMapping(value = "/testMVC2.action")
50. public String getFusionChartsData(ModelMap mm,String username,String passwd) {
51. System.out.println("ajax-使用MappingJacksonJsonView和bean视图解析器返回json数据==>" + username + "(" + passwd + ")");
53. Person p1 = new Person(username+"_1",passwd+"_*1");
54. Person p2 = new Person(username+"_2",passwd+"_*2");
55. List userList = new ArrayList();
56. userList.add(p1);
57. userList.add(p2);
59. mm.addAttribute("userList", userList);
60. mm.addAttribute("Info","测试spring MVC");
62. return "testMVC";
63. }
64. }

---

6. 运行

浏览器：http://localhost:8080/SpringMVC_Ajax_Json/test/index.action# 

来自为知笔记(Wiz)