简单的JQuery(AJAX)+SpringMVC的小例子(JSON)

简单的JQuery(AJAX)+SpringMVC的小例子，实现将对象以JSON的形式返回给页面。
(本例包含一个HelloWorld，一个表单参数传递，一个JSON实例)
如有时间可以在http://www.verycd.com/topics/2917293/下载相关视频。

目录结构：


1.相关Jar包的引入，spring的jar包,jstl的jar包特别是jaskson相关的两个jar包

2.web.xml配置：

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
  
  <servlet>
  	<servlet-name>springmvc</servlet-name>
  	<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
  </servlet>
  
  <servlet-mapping>
  	<servlet-name>springmvc</servlet-name>
  	<url-pattern>*.do</url-pattern>
  </servlet-mapping>
  
  	<context-param>
		<param-name>contextConfigLocation</param-name>
		<param-value>/WEB-INF/springmvc-servlet.xml</param-value>
	</context-param>

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

2.根据web.xml的配置,创建对应的xxxx-servlet.xml文件
这里是springmvc-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:context="http://www.springframework.org/schema/context"
	xmlns:tx="http://www.springframework.org/schema/tx"
	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-2.5.xsd
           http://www.springframework.org/schema/tx 
     	   http://www.springframework.org/schema/tx/spring-tx-3.0.xsd
     	   http://www.springframework.org/schema/mvc
           http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd">

	<context:component-scan base-package="com.mvc"></context:component-scan>
	<mvc:annotation-driven />
	<bean id="viewResolver"
		class="org.springframework.web.servlet.view.UrlBasedViewResolver">
		<property name="viewClass"
			value="org.springframework.web.servlet.view.JstlView"></property>
		<property name="prefix" value="/"></property>
		<property name="suffix" value=".jsp"></property>
	</bean>
	
</beans>

3.Model类的编写

public class Shop {

	String name;
	
	String staffName[];
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String[] getStaffName() {
		return staffName;
	}
	public void setStaffName(String[] staffName) {
		this.staffName = staffName;
	}
	public Shop() {
	} 
	
}

4.Controller的编写

@Controller
public class JSONController {

	@RequestMapping(value="/json", method = RequestMethod.GET)
	public @ResponseBody Shop getShopInJSON() {

		//测试数据
		Shop shop = new Shop();
		System.out.println("Shop");
		shop.setName("Eric");
		shop.setStaffName(new String[]{"mkyong1", "mkyong2"});
		
		return shop;

	}
	
}

5.jsp中的ajax代码：

<script type="text/javascript" src="jquery-1.7.2.min.js">
</script>
<script type="text/javascript">
$(function() {
	getjson();
});

function getjson() {
	$.ajax( {
		type : "get",
		url : "json.do",
		dataType:"json",
		success : function(msg) {
			alert("Data Saved: " + msg.name+"--"+msg.staffName);
		}
	});
}
</script>

6.部署调试网页弹出信息。
以下是项目源码以及所需jar包

评论

12 楼 huyang1988 2016-08-02  

下载不了源码，能否提供下项目以及jar包的源代码啊？我的邮箱[e-mail];看着感觉是可以行的，不过还是得自己尝试下~

11 楼 gjaa 2016-06-05  

楼主，感谢分享，非常有效，另外请问一下：
1）配置中
<listener> 
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> 
    </listener>  的作用是什么啊？

2）jackson-mapper-lgpl-1.9.6.jar jackson-core-lgpl-1.9.6.jar这两个包是如何发挥作用的啊，代码中没有看到使用他们的地方啊。

10 楼 zels 2016-03-23  

为什么我拿源码运行，getJson的时候  就不行呢？

function getjson() {
$.ajax( {
type : "get",
url : "json.do",
dataType:"json",
success : function(msg) {
alert("Data Saved: " + msg.name+"--"+msg.staffName);
},
error : function(msg) {
alert("net error");

}
});
}

总是net error

9 楼 fuyuda 2015-10-22  

这样配置 启动都报错 在这忽悠什么人呢！ 

8 楼 学渣村的好村长 2015-10-12  

alert("Data Saved: " + msg.name+"--"+msg.staffName);  这里面的msg就是return shop的json值么，

7 楼 paul1314 2015-07-07  

感谢分享!

6 楼 sailer2008 2014-10-27  

非常感谢楼主的文章，简单明了又非常有效

5 楼 bo_hai 2014-10-26  

冲杯茶喝 写道

Shop getShopInJSON()
这里返回一个对象，能转成Json吗？

可以的，dataType的类型是json。

4 楼 yhlllq 2014-02-10  

刚看完juery ajax，又搜到这篇文章了，再次感谢！

3 楼 yhlllq 2013-12-09  

谢谢

2 楼 冲杯茶喝 2013-08-23  

Shop getShopInJSON()
这里返回一个对象，能转成Json吗？

1 楼 fufangshi 2013-02-01  

感谢分享！！！！！！