ssslinppp

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
【Spring学习笔记-MVC-5】利用spring MVC框架，实现ajax异步请求以及json数据的返回
作者：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. <%
  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. %>
  9. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  10. <html>
  11. <head>
  12. <title>SpringMVC+ajax+json</title>
  13. <script type="text/javascript">var basePath = "<%=basePath%>";</script>
  14. <%-- <link rel="stylesheet" type="text/css" href="<%=basePath%>js/easyui/demo.css"> --%>
  15. <script type="text/javascript" src="<%=basePath%>js/JQuery/jquery.min.js"></script>
  16. <script type="text/javascript" src="<%=basePath%>js/test/ajaxAndJson.js"></script>
  18. </head>
  19. <body>
  20.     <div style="padding:5px 0;">
  21.         <p>方式1</p>
  22. 		<a href="#" class="easyui-linkbutton" onclick="loadData1()" data-options="iconCls:'icon-add'">ajax异步获取json数据</a>
  23. 	</div>
  24. 	<div style="margin:10px 0 20px 0;"></div>
  25. 	<div style="padding:5px 0;">
  26. 	    <p>方式2</p>
  27. 		<a href="#" class="easyui-linkbutton" onclick="loadData2()" data-options="iconCls:'icon-add'">ajax异步获取json数据</a>
  28. 	</div>
  29. </body>
  30. </html>
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. <web-app 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">
  6. 	<context-param>
  7. 		<param-name>contextConfigLocation</param-name>
  8. 		<param-value>classpath:applicationContext.xml</param-value>
  9. 	</context-param>
  10. 	
  11. 	<listener>
  12. 		<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
  13. 	</listener>
  14. 	
  15. 	<servlet>
  16. 		<servlet-name>mvc-dispatcher</servlet-name>
  17. 		<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
  18. 		<load-on-startup>1</load-on-startup>
  19. 	</servlet>
  20. 	<servlet-mapping>
  21. 		<servlet-name>mvc-dispatcher</servlet-name>
  22. 		<url-pattern>/rest/*</url-pattern>
  23. 	</servlet-mapping>
  24. </web-app>
spring-servlet.xml

  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <beans 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">
  12.        
  13. 	<!-- 扫描web包，应用Spring的注解 -->
  14. 	<context:component-scan base-package="com.ll.web"/>
  15. 	
  16. 	<!-- 配置视图解析器，将ModelAndView及字符串解析为具体的页面，默认优先级最低 -->
  17. 	<bean
  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" />
  23. 	<!-- bean视图解析器 -->
  24. 	<bean class="org.springframework.web.servlet.view.BeanNameViewResolver"
  25. 		p:order="10" />
  26. 		
  27. 	<!-- XMl及JSON视图解析器配置 -->
  28. 	<bean id="testMVC"
  29. 	class="org.springframework.web.servlet.view.json.MappingJacksonJsonView">
  30. 	   <property name="renderedAttributes">
  31. 			<set>
  32. 				<value>userList</value>
  33. 				<value>Info</value>
  34. 			</set>
  35. 	   </property>
  36.     </bean>
  37.     
  38.     <mvc:annotation-driven/>
  40. </beans>
applicationContext.xml

  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <beans 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">
  14.     
  15.     <!-- 扫描类包，将标注Spring注解的类自动转化Bean，同时完成Bean的注入 -->
  16.     <context:component-scan base-package="com.ll.service"/>
  17.     <context:component-scan base-package="com.ll.dao"/>
  19. </beans>


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 {
  16. 	
  17. 	/**
  18. 	 * 返回主页
  19. 	 * @return
  20. 	 */
  21. 	@RequestMapping(value = "/index.action")
  22. 	public String index() {
  23. 		return "index";
  24. 	}
  25. 	
  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. 	}
  40. 	
  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 + ")");
  52. 	
  53. 		Person p1 = new Person(username+"_1",passwd+"_*1");
  54. 		Person p2 = new Person(username+"_2",passwd+"_*2");
  55. 		List<Person> userList = new ArrayList<Person>();
  56. 		userList.add(p1);
  57. 		userList.add(p2);
  59. 		mm.addAttribute("userList", userList);
  60. 		mm.addAttribute("Info","测试spring MVC");
  61. 		
  62. 		return "testMVC";
  63. 	}
  64. }













posted on 2015-05-26 16:15  ssslinppp  阅读(1194)  评论(0)  编辑  收藏  举报