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;
	}

}