【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。

使用到的技术主要如下：

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/j2ee 
	http://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/beans
       http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
       http://www.springframework.org/schema/context 
       http://www.springframework.org/schema/context/spring-context-3.0.xsd
       http://www.springframework.org/schema/mvc
       http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd">
       
	<!-- 扫描web包，应用Spring的注解 -->
	<context:component-scan base-package="com.ll.web"/>
	
	<!-- 配置视图解析器，将ModelAndView及字符串解析为具体的页面，默认优先级最低 -->
	<bean
		class="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/beans 
       http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
       http://www.springframework.org/schema/context 
       http://www.springframework.org/schema/context/spring-context-3.0.xsd
       http://www.springframework.org/schema/tx 
       http://www.springframework.org/schema/tx/spring-tx-3.0.xsd
       http://www.springframework.org/schema/aop
       http://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";
	}
}

6. 运行

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

来自为知笔记(Wiz)

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

【Spring学习笔记-MVC-15.1】Spring MVC之异常处理=404界面
作者:ssslinppp 异常处理请参考前篇博客:<[Spring学习笔记-MVC-15]Spring MVC之异常处理>http://www.cnblogs.com/sssl ...
【Spring学习笔记-MVC-13.2】Spring MVC之多文件上传
作者:ssslinppp 1. 摘要前篇文章讲解了单文件上传<[Spring学习笔记-MVC-13]Spring MVC之文件上传>http://www.cnblogs.co ...
【Spring学习笔记-MVC-18.1】Spring MVC实现RESTful风格-同一资源,多种展现:xml-json-html
概要要实现Restful风格,主要有两个方面要讲解,如下: 1. 同一个资源,如果需要返回不同的形式,如:json.xml等: 不推荐的做法: /user/getUserJson /user/get ...
Spring学习笔记（四）-- Spring事务全面分析
通过本系列的文章对Spring的介绍,我们对Spring的使用和两个核心功能IOC.AOP已经有了初步的了解,结合我个人工作的情况,因为项目是金融系统.那对事务的控制是不可缺少的.而且是很严格的控制 ...
Spring学习笔记（一）—— Spring介绍及入门案例
一.Spring概述 1.1 Spring是什么 Spring是一个开源框架,是于2003年兴起的一个轻量级的Java开发框架, 由Rod Johnson 在其著作<Expert one on ...
Spring学习笔记4—流程（Spring Web Flow）
Spring Web Flow是Spring框架的子项目,作用是让程序按规定流程运行. 1 安装配置Spring Web Flow 虽然Spring Web Flow是Spring框架的子项目,但它并 ...
Spring学习笔记（二）Spring基础AOP、IOC
Spring AOP 1. 代理模式 1.1. 静态代理程序中经常需要为某些动作或事件作下记录,以便在事后检测或作为排错的依据,先看一个简单的例子: import java.util.logging ...
Spring学习笔记（四）—— Spring中的AOP
一.AOP概述 AOP(Aspect Oriented Programming),即面向切面编程,可以说是OOP(Object Oriented Programming,面向对象编程)的补充和完善.O ...
spring学习笔记（二）spring中的事件及多线程
我们知道,在实际开发中为了解耦,或者提高用户体验,都会采用到异步的方式.这里举个简单的例子,在用户注册的sh时候,一般我们都会要求手机验证码验证,邮箱验证,而这都依赖于第三方.这种情况下,我们一般会通 ...

随机推荐

C# 接收form表单中多个相同name值的问题
以前接收form表单的值直接用FormCollection或自定义类来接收,当有多个相同Name的值时会自动用“,”隔开,这样就有了一个问题,当值中本身就含有“,”时就比较难处理了. 所以解决方法就是 ...
C语言、编程语言发展史
前言了解和学习一门语言.一个系统乃至方方面面的任何东西时,如果不知道其历史和现状而只是一上来就一味地闷头苦学,你就很容易“一叶障目不见泰山”. 如此这般火急火燎的就上手苦干,私以为大错特错,所谓“学 ...
bzoj1617
题解: dp f[i]表示运i头奶牛需要的时间 f[i]=f[i-j]+a[i]+2*m 然后ans=f[n]-m(最后一次不用跑回来) 代码: #include<bits/stdc++.h&g ...
Python sqlalchemy使用
import sqlalchemy from sqlalchemy import create_engine from sqlalchemy.ext.declarative import declar ...
VM VirtualBox虚拟机与物理主机之间的复制
物理主机: 系统:Ubuntu 11.04 X86_64 虚拟机: 系统:Windows XP Pack3 点击虚拟机的设备->安装增强功能即可安装后两系统之间的复制,粘贴可正常使用,如同一 ...
MyEclipse10下创建web项目并发布到Tomcat
MyEclipse10下创建web项目并发布到Tomcat 1.软件安装(不作详细描述) 2.启动MyEclipse10 3.File-New-Project,选中Web Project,点击Next ...
自定义页签logo
1.webpack.prod.conf new HtmlWebpackPlugin({ filename: process.env.NODE_ENV === 'testing' ? 'index.ht ...
nw + iframe嵌入page 滚动条问题
iframe 加载完之后会在原尺寸基础上增加4像素(因此我用以下方法处理): <iframe id="myiframe" style="visibility: hi ...
python3：文件读写+with open as语句
转载请表明出处:https://www.cnblogs.com/shapeL/p/9141238.html 前提:文中例子介绍test.json内容: hello 我们 326342 1.文件读取 ( ...
微信小程序插件使用
使用插件小程序开发者可便捷地把插件添加到自己的小程序内,丰富小程序的服务.当用户在使用小程序时,将可以在小程序内使用插件提供的服务. 开放范围所有小程序接入流程在小程序管理后台添加插件小程序 ...

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

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

随机推荐

热门专题