1.後臺返回一個頁面

js程式碼

1. /**(1)用$("#content-wrapper").html(data);顯示頁面*/

2. $.ajax({

3. async : false,

4. cache : false,

5. type : 'POST',

6. url : 'area/prepareCreate',

7. error : function() {

8. alert('smx失敗 ');

9. },

10. success : function(data) {

11. $("#content-wrapper").html(data);

12. }

13. });

java程式碼

1. /*

2. * (1)不能有註解@RespoonseBody

3. * (2)返回值型別是String,代表頁面所在的資料夾

4. * (3)如果返回"error"，執行ajax的error方法

5. */

6. @RequestMapping(value = "area/prepareCreate", method = RequestMethod.POST)

7. public String editAreaWithFile() {

8. return "area/create;

9. // return "error";

10. }

2. 後臺返回一個基本型別String,Long等

js程式碼

1. $.ajax({

2. async : false,

3. cache : false,

4. type : 'POST',

5. url : 'app/area/delete',

6. dataType : "json",

7. error : function() {

8. alert('smx失敗 ');

9. },

10. success : function(data) {

11. /**重點：前臺接收到返回值，直接處理就行*/

12. alert(data);

13. }

14. });

java程式碼

1. /**(1)用@ResponseBody註解

2. (2)可以接收各種引數，url，data(名稱匹配或@RequestBody)

3. (3)返回值型別就是基本型別*/

4. @ResponseBody

5. @RequestMapping(value = "area/delete", method = RequestMethod.POST)

6. public long editArea() {

7. //處理引數

8. return 3;

9. }

3. 後臺返回一個實體類

第一步：定義一個實體類

1. /**

2. * flag為1 :操作失敗

3. * msg：失敗原因；

4. * flag為0: 操作成功*/

5. public class AjaxResponseMsg {

6. private int flag;

7. private String msg;

8. }

第二步：js程式碼

1. $.ajax({

2. async : false,

3. cache : false,

4. type : 'POST',

5. url : 'app/area/delete',

6. error : function() {

7. alert('smx失敗 ');

8. },

9. success : function(data) {

10. var jsonData = JSON.parse(data);

11. if (jsonData .flag == 0) {//請求成功

12. alert("後臺操作成果");

13. } else {

14. alert(jsonData .msg);

15. }

16. }

17. });

第三步：java程式碼

1. /**（1）添加註解@ResponseBody

2. (2)可以接收引數

3. (3)返回型別就是實體類*/

4. @ResponseBody

5. @RequestMapping(value = "area/delete", method = RequestMethod.POST)

6. public AjaxResponseMsg editAreaWithFile() {

7. // 做操作

8. boolean result = true

9. AjaxResponseMsg ajaxMsg = new AjaxResponseMsg();

10. if (result == true)

11. ajaxMsg.setFlag(0);

12. else {

13. ajaxMsg.setFlag(1);

14. ajaxMsg.setMsg("不能給一個感測器新增重複裝置");

15. }

16. return ajaxMsg; // 返回給前臺一個實體類，包括是否操作成功，及失敗原因

17. }

4.後臺返回一個實體類list（實體類的欄位都是基本型別）

實體類

1. public class Section{

2. private Long id; //id

3. private String name; //名稱

4. }

前臺

1. $.ajax({

2. async : false,

3. cache : false,

4. type : 'POST',

5. url : "section/getSections",

6. error : function() {

7. alert("失敗");

8. },

9. success : function(data) {

10. var jsonData = JSON.parse(data); //jsonData是該下路下的所有區間（json格式）

11. for (var i = 0; i < jsonData.length; i++) {

12. alert(jsonData[i].id);

13. alert(jsonData[i].name);

14. }

15. }

16. })

後臺

1. @ResponseBody

2. @RequestMapping("/section/getSections")

3. @RequiresPermissions("section:view")

4. public List<Section> getSections() {

5. List<Section> sections = new List<Section>();

6. return sections;

7. }

5.後臺返回一個實體類list（實體類的欄位包括List型別）

第一步：定義實體類ChartSeries

1. public class ChartSeries {

2. private String name; //曲線名稱

3. private List<Float> data; //曲線的縱座標

4. private List<Date> occurTime; //曲線的橫座標

5. //新增get set方法

6. }

第二步：js程式碼

1. $.ajax({

2. url : "/dataRecord/chart" , //獲取資料列

3. type : 'GET',

4. data : {

5. },

6. success : function(data) {

7. formatStringToJson(data);//對資料進行處理

8. }

9. });

10. function formatStringToJson(data) {

11. jsonData = JSON.parse(data); //把後臺傳來的資料轉來JSON格式

12. //jsonData是二維陣列，因為實體類ChartSeries的欄位data也是個list

13. for (x in jsonData) { //遍歷JSON格式的陣列取元素, x代表下標

14. for (y in jsonData[x].data) {

15. alert(jsonData[x].occurTime[y]) ;//依次獲取

16. alert(jsonData[x].data[y]);

17. }

18. }

19. }

第三步：java程式碼

1. @ResponseBody

2. @RequiresPermissions("dataRecord:view")

3. @RequestMapping(value = "/dataRecord/chart}", method = RequestMethod.GET)

4. public List<ChartSeries> getChart(){

5. List<ChartSeries> list = new List<ChartSeries>();

6. //給list賦值

7. return list; // list

8. }

後臺傳來的資料格式如下