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


本文讲解如何利用spring MVC框架，实现ajax异步请求以及json数据的返回。
使用到的技术主要如下：
  1. Ajax：使用JQuery 提供的ajax；==>需要引入jquery.min.js文件；
  2. Spring MVC；
  3. Json：提供两种方式返回json数据；

2. 项目结构





3. 前端


前台主界面：
文件位置：    浏览器界面：   
  1. <%@ page language="java" pageEncoding="UTF-8"%>
    2. 

  2. <%
    3. 

  3. 	String path = request.getContextPath();
    4. 

  4. 	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
    5. 

  5. 	response.setHeader("Pragma", "no-cache");
    6. 

  6. 	response.setHeader("Cache-Control", "no-cache");
    7. 

  7. 	response.setDateHeader("Expires", 0);
    8. 

  8. %>
    9. 

  9. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    10. 

  10. <html>
    11. 

  11. <head>
    12. 

  12. <title>SpringMVC+ajax+json</title>
    13. 

  13. <script type="text/javascript">var basePath = "<%=basePath%>";</script>
    14. 

  14. <%-- <link rel="stylesheet" type="text/css" href="<%=basePath%>js/easyui/demo.css"> --%>
    15. 

  15. <script type="text/javascript" src="<%=basePath%>js/JQuery/jquery.min.js"></script>
    16. 

  16. <script type="text/javascript" src="<%=basePath%>js/test/ajaxAndJson.js"></script>
    17. 

    18. 

  18. </head>
    19. 

  19. <body>
    20. 

  20.     <div style="padding:5px 0;">
    21. 

  21.         <p>方式1</p>
    22. 

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

  23. 	</div>
    24. 

  24. 	<div style="margin:10px 0 20px 0;"></div>
    25. 

  25. 	<div style="padding:5px 0;">
    26. 

  26. 	    <p>方式2</p>
    27. 

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

  28. 	</div>
    29. 

  29. </body>
    30. 

  30. </html>
ajaxAndJson.js文件==>具体的ajax请求
  1. function loadData1() {
    2. 

  2. 	var actionUrl = basePath + "test/testMVC1.action";
    3. 

  3. 	var params = {
    4. 

  4. 		"username" : 'zhangSan',
    5. 

  5. 		'passwd' : '12345678'
    6. 

  6. 	};
    7. 

  7. 	$.ajax({
    8. 

  8. 		url : actionUrl,
    9. 

  9. 		data : params,
    10. 

  10. 		dataType : "json",
    11. 

  11. 		cache : false,
    12. 

  12. 		error : function(textStatus, errorThrown) {
    13. 

  13. //			$.messager.alert('错误', "系统请求错误: " + textStatus, 'error');
    14. 

  14. 			alert("系统请求错误: " + textStatus);
    15. 

  15. 		},
    16. 

  16. 		success : function(data, textStatus) {
    17. 

  17. //			$.messager.alert('系统提示', data.username+data.passwd ,'info');
    18. 

  18. 			alert(data.username+data.passwd );
    19. 

  19. 		}
    20. 

  20. 	});
    21. 

  21. }
    22. 

    23. 

  23. function loadData2() {
    24. 

  24. 	var actionUrl = basePath + "test/testMVC2.action";
    25. 

  25. 	var params = {
    26. 

  26. 		"username" : 'lisi',
    27. 

  27. 		'passwd' : '888888'
    28. 

  28. 	};
    29. 

  29. 	$.ajax({
    30. 

  30. 		url : actionUrl,
    31. 

  31. 		data : params,
    32. 

  32. 		dataType : "json",
    33. 

  33. 		cache : false,
    34. 

  34. 		error : function(textStatus, errorThrown) {
    35. 

  35. //			$.messager.alert('错误', "系统请求错误: " + textStatus, 'error');
    36. 

  36. 			alert("系统请求错误: " + textStatus);
    37. 

  37. 		},
    38. 

  38. 		success : function(data, textStatus) {
    39. 

  39. //			$.messager.alert('系统提示', data.Info+",  "+data.userList[1].username ,'info');
    40. 

  40. 			alert(data.Info+",  "+data.userList[1].username);
    41. 

  41. 		}
    42. 

  42. 	});
    43. 

  43. }


4. spring mvc配置文件


web.xml

  1. <web-app id="WebApp_ID" version="2.4"
    2. 

  2. 	xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    3. 

  3. 	xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 
    4. 

  4. 	http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
    5. 

    6. 

  6. 	<context-param>
    7. 

  7. 		<param-name>contextConfigLocation</param-name>
    8. 

  8. 		<param-value>classpath:applicationContext.xml</param-value>
    9. 

  9. 	</context-param>
    10. 

  10. 	
    11. 

  11. 	<listener>
    12. 

  12. 		<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    13. 

  13. 	</listener>
    14. 

  14. 	
    15. 

  15. 	<servlet>
    16. 

  16. 		<servlet-name>mvc-dispatcher</servlet-name>
    17. 

  17. 		<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    18. 

  18. 		<load-on-startup>1</load-on-startup>
    19. 

  19. 	</servlet>
    20. 

  20. 	<servlet-mapping>
    21. 

  21. 		<servlet-name>mvc-dispatcher</servlet-name>
    22. 

  22. 		<url-pattern>/rest/*</url-pattern>
    23. 

  23. 	</servlet-mapping>
    24. 

  24. </web-app>
spring-servlet.xml

  1. <?xml version="1.0" encoding="UTF-8" ?>
    2. 

  2. <beans xmlns="http://www.springframework.org/schema/beans"
    3. 

  3. 	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"
    4. 

  4. 	xmlns:context="http://www.springframework.org/schema/context" 
    5. 

  5. 	xmlns:mvc="http://www.springframework.org/schema/mvc"
    6. 

  6. 	xsi:schemaLocation="http://www.springframework.org/schema/beans
    7. 

  7.        http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
    8. 

  8.        http://www.springframework.org/schema/context 
    9. 

  9.        http://www.springframework.org/schema/context/spring-context-3.0.xsd
    10. 

  10.        http://www.springframework.org/schema/mvc
    11. 

  11.        http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd">
    12. 

  12.        
    13. 

  13. 	<!-- 扫描web包，应用Spring的注解 -->
    14. 

  14. 	<context:component-scan base-package="com.ll.web"/>
    15. 

  15. 	
    16. 

  16. 	<!-- 配置视图解析器，将ModelAndView及字符串解析为具体的页面，默认优先级最低 -->
    17. 

  17. 	<bean
    18. 

  18. 		class="org.springframework.web.servlet.view.InternalResourceViewResolver"
    19. 

  19. 		p:viewClass="org.springframework.web.servlet.view.JstlView" 
    20. 

  20. 		p:prefix="/jsp/"
    21. 

  21. 		p:suffix=".jsp" />
    22. 

    23. 

  23. 	<!-- bean视图解析器 -->
    24. 

  24. 	<bean class="org.springframework.web.servlet.view.BeanNameViewResolver"
    25. 

  25. 		p:order="10" />
    26. 

  26. 		
    27. 

  27. 	<!-- XMl及JSON视图解析器配置 -->
    28. 

  28. 	<bean id="testMVC"
    29. 

  29. 	class="org.springframework.web.servlet.view.json.MappingJacksonJsonView">
    30. 

  30. 	   <property name="renderedAttributes">
    31. 

  31. 			<set>
    32. 

  32. 				<value>userList</value>
    33. 

  33. 				<value>Info</value>
    34. 

  34. 			</set>
    35. 

  35. 	   </property>
    36. 

  36.     </bean>
    37. 

  37.     
    38. 

  38.     <mvc:annotation-driven/>
    39. 

    40. 

  40. </beans>
applicationContext.xml

  1. <?xml version="1.0" encoding="UTF-8" ?>
    2. 

  2. <beans xmlns="http://www.springframework.org/schema/beans"
    3. 

  3. 	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"
    4. 

  4. 	xmlns:context="http://www.springframework.org/schema/context"
    5. 

  5. 	xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx"
    6. 

  6. 	xsi:schemaLocation="http://www.springframework.org/schema/beans 
    7. 

  7.        http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
    8. 

  8.        http://www.springframework.org/schema/context 
    9. 

  9.        http://www.springframework.org/schema/context/spring-context-3.0.xsd
    10. 

  10.        http://www.springframework.org/schema/tx 
    11. 

  11.        http://www.springframework.org/schema/tx/spring-tx-3.0.xsd
    12. 

  12.        http://www.springframework.org/schema/aop
    13. 

  13.        http://www.springframework.org/schema/aop/spring-aop-3.0.xsd">
    14. 

  14.     
    15. 

  15.     <!-- 扫描类包，将标注Spring注解的类自动转化Bean，同时完成Bean的注入 -->
    16. 

  16.     <context:component-scan base-package="com.ll.service"/>
    17. 

  17.     <context:component-scan base-package="com.ll.dao"/>
    18. 

    19. 

  19. </beans>


5. 控制器


AjaxController.java

  1. package com.ll.web;
    2. 

    3. 

  3. import java.util.ArrayList;
    4. 

  4. import java.util.List;
    5. 

    6. 

  6. import org.springframework.stereotype.Controller;
    7. 

  7. import org.springframework.ui.ModelMap;
    8. 

  8. import org.springframework.web.bind.annotation.RequestMapping;
    9. 

  9. import org.springframework.web.bind.annotation.ResponseBody;
    10. 

    11. 

  11. import com.ll.model.Person;
    12. 

    13. 

  13. @Controller
    14. 

  14. @RequestMapping(value = "/test")
    15. 

  15. public class AjaxController {
    16. 

  16. 	
    17. 

  17. 	/**
    18. 

  18. 	 * 返回主页
    19. 

  19. 	 * @return
    20. 

  20. 	 */
    21. 

  21. 	@RequestMapping(value = "/index.action")
    22. 

  22. 	public String index() {
    23. 

  23. 		return "index";
    24. 

  24. 	}
    25. 

  25. 	
    26. 

  26. 	/**
    27. 

  27. 	 * 方式1：
    28. 

  28. 	 * 使用@ResponseBody方式返回json数据
    29. 

  29. 	 * @param username
    30. 

  30. 	 * @param passwd
    31. 

  31. 	 * @return
    32. 

  32. 	 */
    33. 

  33. 	@ResponseBody
    34. 

  34. 	@RequestMapping(value = "/testMVC1.action")
    35. 

  35. 	public Person testAjax(String username,String passwd) {
    36. 

  36. 		System.out.println("ajax-使用@ResponseBody方式返回json数据==>" + username + "(" + passwd + ")");
    37. 

    38. 

  38. 		return new Person(username,passwd);
    39. 

  39. 	}
    40. 

  40. 	
    41. 

  41. 	/**
    42. 

  42. 	 * 方式2：
    43. 

  43. 	 * 使用MappingJacksonJsonView和bean视图解析器返回json数据
    44. 

  44. 	 * @param mm
    45. 

  45. 	 * @param username
    46. 

  46. 	 * @param passwd
    47. 

  47. 	 * @return
    48. 

  48. 	 */
    49. 

  49. 	@RequestMapping(value = "/testMVC2.action")
    50. 

  50. 	public String getFusionChartsData(ModelMap mm,String username,String passwd) {
    51. 

  51. 		System.out.println("ajax-使用MappingJacksonJsonView和bean视图解析器返回json数据==>" + username + "(" + passwd + ")");
    52. 

  52. 	
    53. 

  53. 		Person p1 = new Person(username+"_1",passwd+"_*1");
    54. 

  54. 		Person p2 = new Person(username+"_2",passwd+"_*2");
    55. 

  55. 		List<Person> userList = new ArrayList<Person>();
    56. 

  56. 		userList.add(p1);
    57. 

  57. 		userList.add(p2);
    58. 

    59. 

  59. 		mm.addAttribute("userList", userList);
    60. 

  60. 		mm.addAttribute("Info","测试spring MVC");
    61. 

  61. 		
    62. 

  62. 		return "testMVC";
    63. 

  63. 	}
    64. 

  64. }









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

  1. 【Spring学习笔记-MVC-15.1】Spring MVC之异常处理=404界面

    作者:ssslinppp       异常处理请参考前篇博客:<[Spring学习笔记-MVC-15]Spring MVC之异常处理>http://www.cnblogs.com/sssl ...

  2. 【Spring学习笔记-MVC-13.2】Spring MVC之多文件上传

    作者:ssslinppp       1. 摘要 前篇文章讲解了单文件上传<[Spring学习笔记-MVC-13]Spring MVC之文件上传>http://www.cnblogs.co ...

  3. 【Spring学习笔记-MVC-18.1】Spring MVC实现RESTful风格-同一资源,多种展现:xml-json-html

    概要 要实现Restful风格,主要有两个方面要讲解,如下: 1. 同一个资源,如果需要返回不同的形式,如:json.xml等: 不推荐的做法: /user/getUserJson /user/get ...

  4. Spring学习笔记（四）-- Spring事务全面分析

    通过本系列的文章对Spring的介绍,我们对Spring的使用和两个核心功能IOC.AOP已经有了初步的了解,结合我个人工作的情况,因为项目是金融系 统.那对事务的控制是不可缺少的.而且是很严格的控制 ...

  5. Spring学习笔记（一）—— Spring介绍及入门案例

    一.Spring概述 1.1 Spring是什么 Spring是一个开源框架,是于2003年兴起的一个轻量级的Java开发框架, 由Rod Johnson 在其著作<Expert one on ...

  6. Spring学习笔记4—流程（Spring Web Flow）

    Spring Web Flow是Spring框架的子项目,作用是让程序按规定流程运行. 1 安装配置Spring Web Flow 虽然Spring Web Flow是Spring框架的子项目,但它并 ...

  7. Spring学习笔记（二）Spring基础AOP、IOC

    Spring AOP 1. 代理模式 1.1. 静态代理 程序中经常需要为某些动作或事件作下记录,以便在事后检测或作为排错的依据,先看一个简单的例子: import java.util.logging ...

  8. Spring学习笔记（四）—— Spring中的AOP

    一.AOP概述 AOP(Aspect Oriented Programming),即面向切面编程,可以说是OOP(Object Oriented Programming,面向对象编程)的补充和完善.O ...

  9. spring学习笔记（二）spring中的事件及多线程

    我们知道,在实际开发中为了解耦,或者提高用户体验,都会采用到异步的方式.这里举个简单的例子,在用户注册的sh时候,一般我们都会要求手机验证码验证,邮箱验证,而这都依赖于第三方.这种情况下,我们一般会通 ...

随机推荐

  1. js常用用途

     页面元素查找 查找元素方法表达式                                                 返回值                            依据元 ...

  2. L1-042 日期格式化

    世界上不同国家有不同的写日期的习惯.比如美国人习惯写成“月-日-年”,而中国人习惯写成“年-月-日”.下面请你写个程序,自动把读入的美国格式的日期改写成中国习惯的日期. 输入格式: 输入在一行中按照“ ...

  3. WLAN 802.11 a/b/g PHY Specification and EDVT Measurement V

    Receive Minimum Input Level (Sensitivity) 测试方法: Receiver Adjacent Channel Rejection (ACR) -For IEEE8 ...

  4. L232 No methane on Mars

    On earth, most of the methane in the atmosphere has been belched by living organisms, so finding the ...

  5. 阿里云Linux CentOS 7 Docker部署使用gogs搭建自己的git服务器

    一.前言 Git是目前优秀和流行的源代码管理工具.而GitHub是一个面向开源及私有软件项目的托管云平台,但开源免费,私有收费.而公司出于商业化等目的需要搭建自己的源代码托管服务器.通过网上了解Gog ...

  6. Appium 并发测试基于unitest

    前言: 在回归测试阶段,UI测试,兼容测试是测试的必要步骤.UI自动化的本身是比较冗余的测试,但是换个角度思考,UI自动化同时连接多台设备,那么在回归测试时,在同一个脚本下产生的测试结果是非常有价值的 ...

  7. WEB接口测试之Jmeter接口测试自动化 （一）

    软件测试自动化从不同的测试阶段分类,可从下层到上层依次分为单元测试-->接口测试-->界面自动化测试. 单元测试一般有开发人员自行完成,而界面自动化测试合适的测试条件又很难达到,测试人员在 ...

  8. easyui学习笔记10—手风琴格子始终展开和多个格子展开

    始终打开有时候可能会很管用,其实就是一个设置问题.这里就不再介绍引用的资源了,这里只看看html是怎么写的. 1.html代码 <body> <h2>Basic Accordi ...

  9. Windows 7 SP1 多国语言包(MUI language packs)官方下载

      为了装一款 Gal Game (为毛不是装 H-Game?),使用 APP 还是太辛苦了,反正相信童鞋们也都用上“瘟妻”了嘛,装个日文的语言包基本上就可以解决问题了.大家都知道只有旗舰版(Wind ...

  10. openLayers 4 canvas图例绘制，canvas循环添加图片，解决图片闪烁问题

    一.问题来源: 接触Openlayers 一段时间了,最近做了一个农业产业系统,项目中涉及到产业图例,最后考虑用canvas来绘制图例图像.当中带图片的图例移动时,图片会实现闪烁留白情况.闪烁是因为绘 ...