Ajax(jQuery)+SpringMVC(jackson包)+JSON 的组合使用
案例思路图:
本次案例思路参考:
#Ajax+SpringMVC+JSON
##jQuery对Ajax的支持
-*$.ajax():jQuery中发送请求最基本函数
$.ajax({
url:地址,
type:请求类型,
data:请求参数,
async:同步|异步,
dataType:返回结果类型,
success:成功回调函数,
error:失败回调函数
});
-$.get()/$.post():jQuery中发送get或post请求的函数
$.get(url,data,successFun,dataType类型)
$.post(url,data,successFun,dataType类型)
-*load():jQuery中发送请求,将返回的结果设置到
某个div或span元素中
对象.load(url,data)
var xhr = new XMLHttpRequest();
xhr.open("get","check.do",true);
xhr.onreadystatechange = function(){
if(xhr.readyState==4&&xhr.status==200){
处理逻辑successFun
}
}
xhr.send(null);
$.get("check.do",successFun);
##SpringMVC如何返回JSON结果
springmvc需要使用jackson工具包。
jackson工具包:封装了将对象数据转成JSON字符串,
并借助于response的out对象输出。
请求-->DispatcherServlet
-->HandlerMapping
-->Controller(调用Service,DAO)
-->返回ModelAndView或String
-->ViewResolver-->JSP视图
请求-->DispatcherServlet
-->HandlerMapping
-->Controller(调用Service,DAO)
-->返回数据对象(@ResponseBody)
-->调用jackson包-->将数据对象转成JSON写出
loadcities.do-->DispatcherServlet
-->HanlderMapping
-->LoadCityController.execute
-->返回List<City>
-->调用jackson包-->JSON输出
#项目需求
//任务一
动态生成一个股票列表
(扩展功能:定时刷新setInterval(fun,2000))
演示案例
演示工程目录结构
- 需要引入jquery-1.11.1.js脚本
- 导入jackson-lib jar包
配置pom.xml
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.study</groupId>
<artifactId>ajaxcase-springmvc</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>war</packaging>
<dependencies>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>3.2.8.RELEASE</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-core</artifactId>
<version>2.2.3</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.2.3</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-annotations</artifactId>
<version>2.2.3</version>
</dependency>
</dependencies>
</project>
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">
<display-name>ajaxcase-springmvc</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>springmvc</servlet-name>
<servlet-class>
org.springframework.web.servlet.DispatcherServlet
</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:applicationContext.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>springmvc</servlet-name>
<url-pattern>*.do</url-pattern>
</servlet-mapping>
</web-app>
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:context="http://www.springframework.org/schema/context"
xmlns:jdbc="http://www.springframework.org/schema/jdbc"
xmlns:jee="http://www.springframework.org/schema/jee"
xmlns:tx="http://www.springframework.org/schema/tx"
xmlns:aop="http://www.springframework.org/schema/aop"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xmlns:util="http://www.springframework.org/schema/util"
xmlns:jpa="http://www.springframework.org/schema/data/jpa"
xsi:schemaLocation="
http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.2.xsd
http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.2.xsd
http://www.springframework.org/schema/jdbc http://www.springframework.org/schema/jdbc/spring-jdbc-3.2.xsd
http://www.springframework.org/schema/jee http://www.springframework.org/schema/jee/spring-jee-3.2.xsd
http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.2.xsd
http://www.springframework.org/schema/data/jpa http://www.springframework.org/schema/data/jpa/spring-jpa-1.3.xsd
http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.2.xsd
http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd
http://www.springframework.org/schema/util http://www.springframework.org/schema/util/spring-util-3.2.xsd">
<!-- 定义HandlerMapping,支持@RequestMapping -->
<mvc:annotation-driven/>
<!-- 扫描Controller,支持@Controller,@Service等 -->
<context:component-scan base-package="com.dk"/>
</beans>
City.java
package com.dk.entity;
import java.io.Serializable;
public class City implements Serializable{
private int id;
private String name;
public City(int id, String name) {
super();
this.id = id;
this.name = name;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
LoadCityController.java
package com.dk.controller;
import java.util.ArrayList;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.dk.entity.City;
@Controller//扫描
public class LoadCityController {
@RequestMapping("/hello.do")
@ResponseBody
public String showMsg(){
return "Hello SpringMVC";
}
@RequestMapping("/loadcity.do")
@ResponseBody
public City showCity(){
City c = new City(1,"三亚");
return c;
}
@RequestMapping("/loadcities.do")
@ResponseBody//将方法返回对象转成JSON字符串输出
public List<City> execute(){
List<City> list = new ArrayList<City>();
City c1 = new City(1,"北京");
City c2 = new City(2,"天津");
City c3 = new City(3,"上海");
list.add(c1);
list.add(c2);
list.add(c3);
return list;
}
}
demo.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ajax+SpringMVC+JSON</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
//发送ajax请求加载ul中的li
$.ajax({
url:"loadcities.do",
type:"get",
dataType:"json",
success:function(data){
/* var id =data.id;
//解析data,城市数组信息
var name = data.name;
//创建一个li元素
var sli ="<li>"+id+" "+name+"</li>";
//添加到ul中
$("#cities").append(sli); */
for(var i=0;i<data.length;i++){
var id =data[i].id;
var name = data[i].name;
//创建一个li元素
var sli ="<li>"+id+" "+name+"</li>";
//添加到ul中
$("#cities").append(sli);
}
},
error:function(){
alert("加载城市列表失败");
}
});
});
</script>
</head>
<body>
<ul id="cities">
<!-- 通过ajax动态加载 -->
</ul>
<ul id="stocks">
<li> 600301 京东集团 10.13</li>
<li> 600302 暴风科技 20.23</li>
<li> 600303 阿里巴巴 80.15</li>
</ul>
</body>
</html>
启动Tomcat 运行 ajaxcase-springmvc工程, 录入请求http://localhost:8088/ajaxcase-springmvc//demo.html