点击刷新
作者：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。
使用到的技术主要如下：
- Ajax：使用JQuery 提供的ajax；==>需要引入jquery.min.js文件；
- Spring MVC；
- Json：提供两种方式返回json数据；
2. 项目结构
3. 前端
前台主界面：
文件位置：
浏览器界面： 
浏览器界面： 
<%@ page language="java" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";response.setHeader("Pragma", "no-cache");response.setHeader("Cache-Control", "no-cache");response.setDateHeader("Expires", 0);%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>SpringMVC+ajax+json</title><script type="text/javascript">var basePath = "<%=basePath%>";</script><%-- <link rel="stylesheet" type="text/css" href="<%=basePath%>js/easyui/demo.css"> --%><script type="text/javascript" src="<%=basePath%>js/JQuery/jquery.min.js"></script><script type="text/javascript" src="<%=basePath%>js/test/ajaxAndJson.js"></script></head><body><div style="padding:5px 0;"><p>方式1</p><a href="#" class="easyui-linkbutton" onclick="loadData1()" data-options="iconCls:'icon-add'">ajax异步获取json数据</a></div><div style="margin:10px 0 20px 0;"></div><div style="padding:5px 0;"><p>方式2</p><a href="#" class="easyui-linkbutton" onclick="loadData2()" data-options="iconCls:'icon-add'">ajax异步获取json数据</a></div></body></html>
ajaxAndJson.js文件==>具体的ajax请求
function loadData1() {var actionUrl = basePath + "test/testMVC1.action";var params = {"username" : 'zhangSan','passwd' : '12345678'};$.ajax({url : actionUrl,data : params,dataType : "json",cache : false,error : function(textStatus, errorThrown) {// $.messager.alert('错误', "系统请求错误: " + textStatus, 'error');alert("系统请求错误: " + textStatus);},success : function(data, textStatus) {// $.messager.alert('系统提示', data.username+data.passwd ,'info');alert(data.username+data.passwd );}});}function loadData2() {var actionUrl = basePath + "test/testMVC2.action";var params = {"username" : 'lisi','passwd' : '888888'};$.ajax({url : actionUrl,data : params,dataType : "json",cache : false,error : function(textStatus, errorThrown) {// $.messager.alert('错误', "系统请求错误: " + textStatus, 'error');alert("系统请求错误: " + textStatus);},success : function(data, textStatus) {// $.messager.alert('系统提示', data.Info+", "+data.userList[1].username ,'info');alert(data.Info+", "+data.userList[1].username);}});}
4. spring mvc配置文件
web.xml
<web-app id="WebApp_ID" version="2.4"xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://java.sun.com/xml/ns/j2eehttp://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"><context-param><param-name>contextConfigLocation</param-name><param-value>classpath:applicationContext.xml</param-value></context-param><listener><listener-class>org.springframework.web.context.ContextLoaderListener</listener-class></listener><servlet><servlet-name>mvc-dispatcher</servlet-name><servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class><load-on-startup>1</load-on-startup></servlet><servlet-mapping><servlet-name>mvc-dispatcher</servlet-name><url-pattern>/rest/*</url-pattern></servlet-mapping></web-app>
spring-servlet.xml
<?xml version="1.0" encoding="UTF-8" ?><beans xmlns="http://www.springframework.org/schema/beans"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"xmlns:context="http://www.springframework.org/schema/context"xmlns:mvc="http://www.springframework.org/schema/mvc"xsi:schemaLocation="http://www.springframework.org/schema/beanshttp://www.springframework.org/schema/beans/spring-beans-3.0.xsdhttp://www.springframework.org/schema/contexthttp://www.springframework.org/schema/context/spring-context-3.0.xsdhttp://www.springframework.org/schema/mvchttp://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd"><!-- 扫描web包，应用Spring的注解 --><context:component-scan base-package="com.ll.web"/><!-- 配置视图解析器，将ModelAndView及字符串解析为具体的页面，默认优先级最低 --><beanclass="org.springframework.web.servlet.view.InternalResourceViewResolver"p:viewClass="org.springframework.web.servlet.view.JstlView"p:prefix="/jsp/"p:suffix=".jsp" /><!-- bean视图解析器 --><bean class="org.springframework.web.servlet.view.BeanNameViewResolver"p:order="10" /><!-- XMl及JSON视图解析器配置 --><bean id="testMVC"class="org.springframework.web.servlet.view.json.MappingJacksonJsonView"><property name="renderedAttributes"><set><value>userList</value><value>Info</value></set></property></bean><mvc:annotation-driven/></beans>
applicationContext.xml
<?xml version="1.0" encoding="UTF-8" ?><beans xmlns="http://www.springframework.org/schema/beans"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"xmlns:context="http://www.springframework.org/schema/context"xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx"xsi:schemaLocation="http://www.springframework.org/schema/beanshttp://www.springframework.org/schema/beans/spring-beans-3.0.xsdhttp://www.springframework.org/schema/contexthttp://www.springframework.org/schema/context/spring-context-3.0.xsdhttp://www.springframework.org/schema/txhttp://www.springframework.org/schema/tx/spring-tx-3.0.xsdhttp://www.springframework.org/schema/aophttp://www.springframework.org/schema/aop/spring-aop-3.0.xsd"><!-- 扫描类包，将标注Spring注解的类自动转化Bean，同时完成Bean的注入 --><context:component-scan base-package="com.ll.service"/><context:component-scan base-package="com.ll.dao"/></beans>
5. 控制器
AjaxController.java
package com.ll.web;import java.util.ArrayList;import java.util.List;import org.springframework.stereotype.Controller;import org.springframework.ui.ModelMap;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.ResponseBody;import com.ll.model.Person;@Controller@RequestMapping(value = "/test")public class AjaxController {/*** 返回主页* @return*/@RequestMapping(value = "/index.action")public String index() {return "index";}/*** 方式1：* 使用@ResponseBody方式返回json数据* @param username* @param passwd* @return*/@ResponseBody@RequestMapping(value = "/testMVC1.action")public Person testAjax(String username,String passwd) {System.out.println("ajax-使用@ResponseBody方式返回json数据==>" + username + "(" + passwd + ")");return new Person(username,passwd);}/*** 方式2：* 使用MappingJacksonJsonView和bean视图解析器返回json数据* @param mm* @param username* @param passwd* @return*/@RequestMapping(value = "/testMVC2.action")public String getFusionChartsData(ModelMap mm,String username,String passwd) {System.out.println("ajax-使用MappingJacksonJsonView和bean视图解析器返回json数据==>" + username + "(" + passwd + ")");Person p1 = new Person(username+"_1",passwd+"_*1");Person p2 = new Person(username+"_2",passwd+"_*2");List<Person> userList = new ArrayList<Person>();userList.add(p1);userList.add(p2);mm.addAttribute("userList", userList);mm.addAttribute("Info","测试spring MVC");return "testMVC";}}
© 著作权归作者所有
举报
相关热门文章
发表评论
0/200
