Spring MVC + jQuery AJAX success() 接收后台返回数据

要理解这篇文章，先理解Spring的@ResponseBody注解  Spring MVC 接收请求参数的注解和响应注解

这是重新整理的，原文 jQuery AJAX 方法 success()后台传来的4种数据

1. 后台返回一个基本类型String,Long等 

• 1.1 jsp页面 直接获取data就行 是一个基本数据类型

<script>
	function test() {

		$.ajax({
			async : false,
			cache : false,
			type : 'POST',
			url : '/web-demo-test/student/add',
			dataType : "json",
			success : function(data) {
				console.log("data===", data);

			},
			error : function() {
				alert('why 失败 ');
			}

		});
	}
</script>

•  1.2 后台控制器方法 用ResponseBody注解方法，然后返回一个基本数据类型 Integer对象

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
@RequestMapping("/student")
public class StudentController {

	@RequestMapping(value = "/add", method = RequestMethod.POST)
	@ResponseBody
	public Integer addStudent() {		 
		return 67;
	}

}

 

• 新建实体类

public class Student {

	private String name;
	private Integer age;

}

2. 后台返回一个实体类 

• 2.1 jsp代码 这个success:function(data) data值就是从后台返回的值，这是一个json对象 操作json对象参考 

<script>
	function test() {

		$.ajax({
			async : false,
			cache : false,
			type : 'POST',
			url : '/web-demo-test/student/add',
			dataType : "json",
			success : function(data) {
				//data 是一个json对象，直接操作json对象
				console.log("name =", data.name);
				console.log("age =", data.age);
			},
			error : function() {
				alert('why 失败 ');
			}

		});
	}
</script>

• 2.2 后台控制器方法 用ResponseBody注解方法，然后返回一个实体类对象 

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.mx.entity.Student;

@Controller
@RequestMapping("/student")
public class StudentController {

	@RequestMapping(value = "/add", method = RequestMethod.POST)
	@ResponseBody
	public Student addStudent() {
		Student student = new Student();
		student.setName("mc");
		student.setAge(45);
		return student;
	}
}

3.后台返回一个实体类的集合 

•    3.1 jsp代码 这个success:function(data) data值就是从后台返回的值， data是一个数组，数据的每一个元素的json对象

<script>
	function test() {

		$.ajax({
			async : false,
			cache : false,
			type : 'POST',
			url : '/web-demo-test/student/add',
			dataType : "json",
			success : function(data) {
				//data 是一个数组, 每一个数组的元素是一个json对象
				for (x in data) { 
					console.log("x==", x);
					console.log("data[x]==", data[x]); //data[x] 是一个json对象
					for (j in data[x]) {
						console.log("j==", j);
						console.log("data[x]==", data[x][j]);
					}
				}
			},
			error : function() {
				alert('why 失败 ');
			}

		});
	}
</script>

• 3.2 后台控制器方法 用ResponseBody注解方法，然后返回一个实体类对象的集合 

package com.mx.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.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.mx.entity.Student;

@Controller
@RequestMapping("/student")
public class StudentController {

	@RequestMapping(value = "/add", method = RequestMethod.POST)
	@ResponseBody
	public List<Student> addStudent() {
		List<Student> students = new ArrayList<Student>();
		Student student1 = new Student("mc", 45);
		Student student2 = new Student("mz", 22);
		students.add(student1);
		students.add(student2);

		return students;
	}
}

4.后台返回一个实体类list（实体类的字段包括List类型） 

• 4.1 jsp代码 这个success:function(data) data值就是从后台返回的值， 
• data是一个数组，数据的每一个元素的json对象 json对象的scores属性是一个数组

<script>
	function test() {

		$.ajax({
			async : false,
			cache : false,
			type : 'POST',
			url : '/web-demo-test/student/add',
			dataType : "json",
			success : function(data) {
				//data 是一个数组, 每一个数组的元素是一个json对象  
				for (i in data) { //data 是一个数组

					for (j in data[i]) { //data[i] 是一个json对象
						console.log("i==", i);
						console.log("data[x]==", data[x][j]);
					}

					for (m in data[i].scores) { //data[i].scores 是一个数组
						console.log("scores[x]==", data[x].scores[m]);
					}
				}
			},
			error : function() {
				alert('why 失败 ');
			}

		});
	}
</script>

• 4.2 后台控制器方法 用ResponseBody注解方法，然后返回一个实体类对象的集合 

import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.mx.entity.Student;

@Controller
@RequestMapping("/student")
public class StudentController {

	@RequestMapping(value = "/add", method = RequestMethod.POST)
	@ResponseBody
	public List<Student> addStudent() {
		List<Student> students = new ArrayList<Student>();
		Student student1 = new Student("mc", 45,new ArrayList<Integer>(Arrays.asList(67, 60)));
		Student student2 = new Student("mz", 22,new ArrayList<Integer>(Arrays.asList(90, 80)));
		students.add(student1);
		students.add(student2);

		return students;
	}

}