后端开发基础-Ajax学习-005——在SpringMVC中Ajax（jquery）的使用

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Coder_Boy_/article/details/83039403

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)）

演示案例 

演示工程目录结构

1. 需要引入jquery-1.11.1.js脚本
2. 导入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