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

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
-->调用jackson包-->JSON输出

#项目需求
//任务一
  动态生成一个股票列表
（扩展功能：定时刷新setInterval(fun,2000)）

演示案例 

演示工程目录结构

1. 需要引入jquery-1.11.1.js脚本
2. 导入jackson-lib jar包

配置pom.xml

  4.0.0
  com.study
  ajaxcase-springmvc
  0.0.1-SNAPSHOT
  war
  
   
  	
  		org.springframework
  		spring-webmvc
  		3.2.8.RELEASE
  	
  	
  		com.fasterxml.jackson.core
  		jackson-core
  		2.2.3
  	
  	
  		com.fasterxml.jackson.core
  		jackson-databind
  		2.2.3
  	
  	
  		com.fasterxml.jackson.core
  		jackson-annotations
  		2.2.3
  	
  

web.xml

  ajaxcase-springmvc
  
    index.html
    index.htm
    index.jsp
    default.html
    default.htm
    default.jsp
  
  
  
  	springmvc
  	
  		org.springframework.web.servlet.DispatcherServlet
  	
  	
  		contextConfigLocation
  		classpath:applicationContext.xml
  	
  	1
  
  
  	springmvc
  	*.do
  

applicationContext.xml 

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 execute(){
		List list  = new ArrayList();
		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

	
		
		
		
		
	
	
		

			
		
		

			
 600301 京东集团   10.13
			
 600302  暴风科技   20.23
			
 600303  阿里巴巴   80.15
		
	

启动Tomcat 运行 ajaxcase-springmvc工程， 录入请求http://localhost:8088/ajaxcase-springmvc//demo.html